javascript - 在画布上绘图时鼠标坐标不正确

Question

我正在尝试在画布上绘图，但鼠标位置已关闭，当我绘图时它们似乎太靠右了。

画布居中，宽度为 960px。

这是该页面的 URL：http: //passion4web.co.uk/ben/canvas/app/

我正在使用以下函数来获取鼠标位置：

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };  
    }

Answer 1

画布有两种不同的尺寸：

• 页面大小
• 图像的像素大小

您需要将画布大小（以像素为单位）设置为页面大小，以获得准确的 1:1 渲染：

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

请记住，当您设置画布对象的width/height成员时，图片会被清除（即使您正在设置当前存在的相同值）。