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

Question

我想在 Canvas 上画画，但鼠标位置不对，我画画时它们似乎太靠右了。

Canvas 居中，宽度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

Canvas 有两种不同的尺寸:

• 页面大小
• 图像的大小(以像素为单位)

您需要将 Canvas 大小(以像素为单位)设置为页面上的大小以获得准确的 1:1 渲染:

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

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