javascript - 使用鼠标坐标 Canvas 绘图问题？

Question

我正在使用鼠标的 x/y 坐标在 Canvas 上绘图，但是我正在绘制的线条总是有点偏离，请尝试在此处绘制:http://zachrip.net/widgets/onlineedit/index.html (左上)举个例子来说明我的意思。没有抵消，所以我没有考虑它，所以我不知道问题是什么？

Answer 1

这里的问题是您通过 CSS 设置 Canvas 元素大小，但没有设置绘图表面大小。

绘图表面的默认大小为 300 像素 x 150 像素。由于您没有设置它，而是设置了元素大小，因此浏览器会缩放绘图表面大小以适合元素。通过鼠标事件获得的 x 和 y 坐标对应于元素大小，而不是实际的绘图表面大小。这就是为什么你会得到偏移量。

现在， fiddle 我之前发布的只是让您设置绘图表面的大小，而不是元素的大小。这可行，但如果您希望有不同的元素和绘图表面尺寸，那么您也可以这样做

function scaleCoords(x, y) {
    x = x * DrawingSurfaceSize.width/ElementSize.width;
    y = y * DrawingSurfaceSize.height/ElementSize.height;

    return {x: x, y: y};
}

<强> Example for second method 。