Question

我在网站的中心有一个画布。当我在画布上执行鼠标单击时，我想在点击位置绘制一个小图像。为了获得画布的正确坐标，我点击了这样的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);
}

警报功能显示正确的坐标，但图像是在具有更高坐标值的位置绘制的。如果我向远处或向左点击一点点，图像根本不会被绘制（可能是因为它在画布外面）。

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

可能是什么问题？

汉克

Answer 1

您可能忘记为画布位图定义大小，并且仅使用CSS来设置大小。请记住，画布大小必须设置为隐式，因为CSS不会影响其位图大小。

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

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

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

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

＆＃13;

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);      
}

＆＃13;

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

＆＃13;

Answer 2

似乎我错过了画布的默认大小（300,150）。如果我将canvas-object的宽度和高度更改为cs文件中指定的大小，它就可以工作！

Answer 3

尝试：

    function click( event ) {

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

    offsetXY = canvas.getBoundingClientRect();

        myX-=offsetXY.top;
        myY-=offsetXY.left;

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

        ctxt.drawImage(myImage, myX, myY);

        alert(myX + " " + myY);
    }

＆＃34;返回的值是一个TextRectangle对象，它包含描述边框的只读左，上，右和底属性（以像素为单位）。 top和left相对于视口的左上角。＆＃34; https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

希望这就是你所需要的。

编辑：offsetXY.top和offsetXY.left。对象的那些属性不是资本。

Canvas context.drawimage不能在正确的坐标上绘制

3 个答案: