在Canvas上绘制时鼠标坐标不正确

Question

我正在尝试在画布上画画，但鼠标位置关闭，当我画画时，它们似乎距离右侧太远。

画布中间居中，宽度为960像素。

以下是该网页的网址：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成员时，图片会被清除（即使您设置的是当前存在的相同值）。