Question

我正在制作一个我想在画布上绘画的项目。我在鼠标悬停时获得绘制方法，并打算在跟随鼠标时绘制一条线。它完美地绘制线条而不是正确的位置。

它可能是bij JQuery。

var canvas = document.getElementById('myCanvas');
 ctx = canvas.getContext('2d');  
ctx.beginPath();  
$("#myCanvas").mousemove(function(arg)
                {   ctx.lineTo(arg.pageX,arg.pageY-80);
                    ctx.stroke();
                });

我的html Canvas代码：

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

 </canvas>

我希望这是可以理解的，有人可以帮助我。（第y页上的-80信息是因为我在屏幕上的效果比...更好）

Answer 1

这是一种相对于画布读取鼠标位置的可选方法：

$("#myCanvas").mousemove(function(arg) {
    var pos = getMousePos(canvas, arg);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
});

function getMousePos(canvas, e) {
    var rect = canvas.getBoundingClientRect();  // absolute position of canvas
    return {
        x: e.clientX - rect.left,               // make x/y relative to canvas
        y: e.clientY - rect.top
    };
}

只是旁注：我们将遇到有关lineTo / stroke组合BTW的问题，因为lineTo将添加到路径中，当您描边时，新行以及添加的所有其他行将被描边。因为它会变得越慢，绘制的线越多，消除锯齿的像素就会开始出现。您可以使用beginPath和moveTo来解决，但这个问题超出范围。

用鼠标移动绘图使鼠标指针的线方式

1 个答案: