用JavaScript在画布上画一个矩形-定义矩形

使用相对于画布的鼠标坐标:

var rect;
var canvas;
var context;
var dragging;
function Point(x, y) {
    this.x = x;
    this.y = y;
}
function Size(width, height) {
    this.width = width;
    this.height = height;
}
function Rectangle(start, size) {
    this.start = start;
    this.size = size;
}
function init() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    canvas.addEventListener("mousedown", startDragging, false);
    canvas.addEventListener("mouseup", stopDragging, false);
    canvas.addEventListener("mousemove", moved, false);
    var start = new Point(0, 0);
    var size = new Size(0, 0);
    rect = new Rectangle(start, size);
}
function startDragging(event) {
    dragging = true;
    // initialize start point
    var box=canvas.getBoundingClientRect();
    var offsetX=box.left;
    var offsetY=box.top;
    var mouseX = parseInt(event.clientX-offsetX);
    var mouseY = parseInt(event.clientY-offsetY);
    rect.start.x = mouseX;
    rect.start.y = mouseY;
    // initialize size
    rect.size.width = 0;
    rect.size.height = 0;
}
function stopDragging(event) {
    dragging = false;
}
function moved(event) {
    if(!dragging) return;
    var box=canvas.getBoundingClientRect();
    var offsetX=box.left;
    var offsetY=box.top;
    var mouseX = parseInt(event.clientX-offsetX);
    var mouseY = parseInt(event.clientY-offsetY);
    clearRect(rect);
    rect.size.width = mouseX - rect.start.x;
    rect.size.height = mouseY - rect.start.y;
    drawRect(rect);
}
function clearRect(rect) {
    context.clearRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
}
function drawRect(rect) {
    context.fillRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
}

您只需要从位置计算中减去画布的左上角位置。

将这个全局变量添加到你的设置中:

var canvasBox = document.getElementsByTagName('canvas')[0].getBoundingClientRect();

如果你在函数中包装了你的设置，使用窗口。而把canvasBox变成全局的。然后使用此函数计算您的新相对位置。

function getPos(event)
{
    return {"x":event.clientX - canvasBox.left,"y":event.clientY-canvasBox.top};
}

像这样使用

var mousePos = getPos(event);
//mousePos.x
//mousePos.y

这是一个扩展的片段处理触摸，它已经从我的库编辑，所以要注意拼写错误!

function init()
{
    window.canvas = document.getElementsByTagName('canvas')[0];
    window.context = canvas.getContext('2d');
    window.canvasBox = canvas.getBoundingClientRect();
    canvas.ontouchstart = function(event){start(event);};
    canvas.ontouchmove = function(event){update(event);};
    canvas.ontouchleave = function(event){end(event);};
    canvas.onmousedown = function(event){start(event);};
    canvas.onmousemove = function(event){update(event);};
    window.addEventListener('mouseup',function(event){end(event);},false);
    window.addEventListener('touchend',function(event){end(event);},false);
    window.addEventListener('touchcancel',function(event){end(event);},false);
}
function start(event)
{
    var position = getPos(event);
}
function update(event)
{
    var position = getPos(event);
}
function end(event)
{
    var position = getPos(event);
}
function getPos(event)
{
    event.preventDefault(); //stops a touch from scrolling the page etc
    var pos = {};
    if(typeof event.changedTouches !== "undefined") // check for preferred touch data
    {   if(event.changedTouches.length !== 0){ // check to see if there are any touches available
            pos.x = event.changedTouches[0].clientX;
            pos.y = event.changedTouches[0].clientY;
    }   }
    else if(typeof event.touches !== "undefined") // check for other touch data
    {   if(event.touches.length !== 0){ // check to see if there are any touches available
            pos.x = event.touches[0].clientX;
            pos.y = event.touches[0].clientY;
    }   }
    else if(typeof event.clientX !== "undefined") //check for mouse location
    {
        pos.x = event.clientX;
        pos.y = event.clientY;
    }
    else //set to null as a fallback
    {
        pos.x = null;
        pos.y = null;
    }
    if(pos.x!==null) // if we have a position, make it in canvas relative space
    {
        pos.x -= canvasBox.left; 
        pos.y -= canvasBox.top;
    }
    return pos; 
}