画布绘制使用鼠标的问题

Canvas drawing using mouse coords issue?

本文关键字：鼠标 问题 布绘制 绘制      更新时间：2023-09-26

我正在使用鼠标的x/y轴绘制画布，但我绘制的线总是画出一点，尝试在这里绘制:http://zachrip.net/widgets/onlineedit/index.html(左上角)作为我的意思的一个例子。没有抵消，所以我没有解释，所以我不知道是什么问题?

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

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

现在，我之前发布的小提琴只是让你设置绘图表面的大小，而不是元素。这是可行的，但是如果你想要不同的元素和绘图面大小，那么你也可以使用 
function scaleCoords(x, y) {
    x = x * DrawingSurfaceSize.width/ElementSize.width;
    y = y * DrawingSurfaceSize.height/ElementSize.height;
    return {x: x, y: y};
}

第二种方法的示例。

相关文章：