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

【问题标题】：Drawing wtih mouse move make line way of mouse point用鼠标移动绘图使鼠标指针的线方式
【发布时间】：2014-02-27 13:55:34
【问题描述】：

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

可能是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 id="myCanvas" width="500" height="500">

 </canvas>

我希望这是可以理解的，并且有人可以帮助我。（pageY 处的 -80 信息是因为我在屏幕上的表现比我在屏幕上的表现更好）

【问题讨论】：

标签： javascript jquery html canvas drawing

【解决方案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 组合的问题，因为 lineTo 将添加到路径中，当您描边时，新行以及添加的所有其他行都将被描边。因为它会变得更慢，绘制的线条越多，抗锯齿像素就会开始出现。您可以使用 beginPath 和 moveTo 来解决，但这超出了此问题的范围。

【讨论】：

context.arc(mousePos.x+50,mousePos.y,5,0,2*Math.PI); context.fill();试试这个而不是行