使用鼠标坐标绘制画布问题？

【问题标题】：Canvas drawing using mouse coords issue?使用鼠标坐标绘制画布问题？
【发布时间】：2013-01-06 04:39:02
【问题描述】：

我正在使用鼠标的 x/y 坐标在画布上绘制，但我绘制的线条总是会稍微偏离一点，请尝试在此处绘制：http://zachrip.net/widgets/onlineedit/index.html（左上角）作为示例我的意思。没有offset所以不考虑，所以不知道是什么问题？

【问题讨论】：

我之前有它工作过，我不知道我改变了什么o.O
不要在 CSS 中设置画布的宽度和高度，而是在 edit.js 中进行； c.width = 200; 和 c.height = 200;.
这是一个工作小提琴； jsfiddle.net/umswe/2.
@Rikonator 非常感谢您，如果您回答问题，我会为您选择。

标签： javascript html5-canvas

【解决方案1】：

这里的问题是您正在通过 CSS 设置 Canvas Element Size，但没有设置 Drawing Surface Size。

绘图表面的默认大小为 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.

【讨论】：