Question

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

我有以下代码：

    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中。我认为这是问题所在。

所以我的问题是＆＃34; e.client＆＃34;参数不起作用因为我的画布只是窗户的一小部分？

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

Answer 1

您必须通过canvas元素的偏移量调整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();
}

如何在mousedown上画画？

1 个答案: