画布鼠标事件位置与光标不同

Question

我开始尝试使用canvas,这可能是一个基本问题,但在这里找不到问题.

我的鼠标光标比使用鼠标事件坐标在画布上绘制的线慢.我在这里错过了什么？

小提琴

PS-如果使用jQuery的鼠标事件同样的问题:http://jsfiddle.net/2q4Sd/2/

window.addEvent('mousemove', function (event) {
    draw(event.event.clientX);
});

function draw(mouseX) {
    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    ctx.moveTo(mouseX, 0);
    ctx.lineTo(mouseX, canvas.height);
    ctx.stroke();
    ctx.closePath();
}

Answer 1

由于两个原因,您的画线已关闭.两者都与由event.clientX等返回的坐标和画布使用的坐标之间的差异有关:

1. 每个画布都有自己的坐标系,默认以canvas元素左上角的(0,0)开头.event.clientX但是相对于"客户区"的度量(基本上是视口,或者在iframe的情况下,它是在页面上占用的区域).因此,当您传递event.clientX到你的draw()函数,并用它来画到画布上,你不是在这两个坐标系走的是差异的帐户.为此,您可以使用以下内容:.getBoundingClientRect().
2. 你遇到的另一个问题是,在你的情况下,返回的坐标的比例与event.clientX特定画布元素所使用的坐标之间存在差异.我在这里谈到这个:https://stackoverflow.com/a/19079320/1937302但基本上,除非你有充分的理由,否则我确保CSS设置的画布尺寸等于尺寸为使用HTML属性设置width和height.

解决这两个问题给出了:

http://jsfiddle.net/2q4Sd/8/

相关HTML:

<canvas style="width:400px;height:300px;" width="400" height="300"></canvas>

新draw()功能:

function draw(mouseX) {

    // fixes offset caused by event.clientX and the canvas element
    // having different origins for their coordinate systems:
    var xCoord = mouseX - canvas.getBoundingClientRect().left;

    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    ctx.moveTo(xCoord, 0);
    ctx.lineTo(xCoord, canvas.height);
    ctx.stroke();
    ctx.closePath();
}