Fiddle

P.S.-如果使用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等返回的坐标与画布使用的坐标之间的差异有关：

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

解决这两个问题：

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

相关HTML：

height

新<canvas style="width:400px;height:300px;" width="400" height="300"></canvas>功能：

draw()

Answer 2

这是因为首先在画布上没有正确设置大小，所以它通过CSS大小后渲染，其次是因为你有默认的填充。

如果您将画布线更改为：

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

并重置填充/边距：

* {padding:0px;margin:0px;}

你应该很好，否则你将不得不通过使用类似getBoundingClientRect（）

之类的东西获得画布尺寸来处理偏移

我已经更新了你的小提琴：

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

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

Fiddle

2 个答案: