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

Question

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

Answer 1

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

绘图表面的默认大小是300px x 150px。既然你没有设置它，但是设置了元素尺寸，浏览器会缩放绘图表面的尺寸以适应元素。通过鼠标事件获得的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。