1

我想简单地在画布上添加一个点。

我有以下代码：

    var canv = document.getElementById("myCanvas");
    var context = canv.getContext("2d");
    var radius = 5;

    var putPoint = function(e){
        context.beginPath();
        context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
        context.fill();
    }

    canv.addEventListener('mousedown', putPoint);

我正在通过视频教程学习如何做到这一点。然而，他们将画布设置为浏览器窗口的全宽/高度，而我的画布位于 400px * 400px 并包含在 div 中。我认为这是问题所在。

所以我的问题是“e.client”参数是否因为我的画布只是窗口的一小部分而不起作用？

如果是这样，我如何在画布上跟踪鼠标坐标？

4

1 回答 1

0

您必须通过画布元素的偏移量调整 e.clientX/e.clientY。

否则，您将错误地计算鼠标的位置，并且您的点可能被绘制在画布边界之外。

这是您修改的代码以考虑画布偏移量。

var putPoint = function(e){

    var BB=canvas.getBoundingClientRect();
    var offsetX=BB.left;
    var offsetY=BB.top;
    var mouseX=e.clientX-BB.left;
    var mouseY=e.clientY-BB.top;

    context.beginPath();
    context.arc(mouseX,mouseY,radius,0,Math.PI*2);
    context.fill();
}
于 2014-04-19T02:00:47.023 回答