使用鼠标coords的画布画？

Question

我正在使用鼠标的x / y坐标绘制到画布，但是我绘制的线总是略微抽出，请尝试在此处绘图：http://zachrip.net/widgets/onlineedit/index.html（左上角）我的意思的一个例子。没有偏移，所以我没有考虑到它，所以我不知道问题是什么？

Answer 1

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

绘图表面的默认大小为300像素×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