javascript - Canvas context.drawimage 没有在正确的坐标上绘制

Question

我在网站的中心有一个 Canvas 。当我在 Canvas 上执行鼠标单击时，我希望在单击位置绘制一个小图像。为了设法获得 Canvas 点击的正确坐标，我构造了一个 JavaScript 函数，如下所示:

function click( event ) {

    var ctxt;
    var myX =  event.clientX;
    var myY =  event.clientY;

    myX-=canvas.offsetTop;
    myY-=canvas.offsetLeft;

    ctxt = canvas.getContext("2d");

    ctxt.drawImage(myImage, myX, myY);

    alert(myX + " " + myY);
}

警报功能显示正确的坐标，但图像绘制在坐标值高得多的位置。如果我稍微向下或向左单击一点，则根本不会绘制图像(可能是因为它在 Canvas 之外)。

绘制的图像的 x 坐标大约是点击 x 坐标的 3 倍，y 坐标大约是点击 x 坐标的 5 倍。

可能是什么问题？

汉克

Answer 1

您可能忘记了定义 Canvas 位图的大小，而只是使用 CSS 来设置大小。请记住， Canvas 大小必须设置为隐式，因为 CSS 不会影响其位图大小。

<canvas id="myCanvas" width=500 height=500></canvas>

如果不是，默认为 300x150 的位图将被拉伸(stretch)为您使用 CSS 设置的任何值，这意味着您的坐标也将被缩放。

为此应跳过 CSS，但如果您绝对想使用它，请将 CSS 中的宽度和高度设置为与为 Canvas 元素定义的大小相同。

您获得的鼠标位置将是相对于窗口的，因此您需要减去 Canvas 位置以使其相对于 Canvas 元素。你可能已经有了这个工作，iHank 的例子应该可以工作，尽管我不会每次都获取上下文:

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

canvas.addEventListener('click', mouseClick, false);

ctx.strokeRect(0, 0, canvas.width, canvas.height);

function mouseClick(e) {

    var rect = canvas.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;
 
    // draw image here, for demo - drawn from corner not center:
    ctx.fillRect(x, y, 5, 5);      
}

Canvas: <canvas id="myCanvas" width=500 height=180></canvas>