带有光标跟随器的画布[重复]

Question

$(function(){
     var mouseX = 0;
     var mouseY = 0;

     $('body,html').mousemove(function(e){
       var gap = parseInt($('#stalker').css("width")) / 2;
       mouseX = e.pageX - gap;
       mouseY = e.pageY - gap;
       $('#stalker').css('left', mouseX);
       $('#stalker').css('top', mouseY);
     });

     var canvas = document.getElementById('mycanvas');
     if(!canvas || !canvas.getContext) return false;
     var ctx = canvas.getContext('2d');

     ctx.lineWidth = 2;
     ctx.lineJoin = ctx.lineCap = 'round';

     var startX,
         startY,
         x,
         y,
         borderWidth = 5,
         isDrawing = false;

     $('#mycanvas,#stalker').mousedown(function(e){
        startX = e.pageX - $('#mycanvas').offset().left - borderWidth;
        startY = e.pageY - $('#mycanvas').offset().top - borderWidth;
     })
     .mouseup(function(e){
       if(!isDrawing) return;
       x = e.pageX - $('#mycanvas').offset().left - borderWidth;
       y = e.pageY - $('#mycanvas').offset().top - borderWidth;

       ctx.beginPath();
       ctx.moveTo(startX, startY);
       ctx.lineTo(x,y);
       ctx.stroke();
     })


     $('#mycanvas').mouseenter(function(e){
        startX = e.pageX - $('#mycanvas').offset().left - borderWidth;
        startY = e.pageY - $('#mycanvas').offset().top - borderWidth;
      });

     $('body,html').mousedown(function(e){
       isDrawing = true;
     })
     .mouseup(function(e){
       isDrawing = false;
     });

     $('#mycanvas,#stalker').mousemove(function(e){
       if(!isDrawing) return;
       x = e.pageX - $('#mycanvas').offset().left - borderWidth;
       y = e.pageY - $('#mycanvas').offset().top - borderWidth;

       ctx.beginPath();
       ctx.moveTo(startX, startY);
       ctx.lineTo(x,y);
       ctx.stroke();

       startX = x;
       startY = y;
     });

   });

#mycanvas{
  border:5px solid #999;
}
#stalker{
  position:absolute;
  width:80px;
  height:80px;
  border:solid 1px gray;
  border-radius:50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="stalker"></div>
<canvas width="550px" height="500px" id="mycanvas">
</canvas>

我正在尝试用 canvas 制作一个绘图应用程序， 我需要一个在绘图时一直跟随光标的圆圈。 所以我写了上面的代码， 但它并没有真正起作用：如果我慢慢画一条线，它看起来很好，但如果我更快地移动光标，这条线就不会连接。 即使我没有释放鼠标点击，这条线也会像两三条单独的线。 我认为这可能是因为 #stalker 没有赶上光标的速度，所以我也将“mousedown”和“mousemove”放在 #mycanvas 上，但仍然如此不工作。

有人知道为什么吗？

Answer 1

您可以将鼠标位置保存在一个数组中，然后绘制它

一个简单的例子：

$(function(){
 var mouseX = 0;
 var mouseY = 0;

 $('body,html').mousemove(function(e){
   var gap = parseInt($('#stalker').css("width")) / 2;
   mouseX = e.pageX - gap;
   mouseY = e.pageY - gap;
   $('#stalker').css('left', mouseX);
   $('#stalker').css('top', mouseY);
 });

 var canvas = document.getElementById('mycanvas');
 if(!canvas || !canvas.getContext) return false;
 var ctx = canvas.getContext('2d');

 ctx.lineWidth = 2;
 ctx.lineJoin = ctx.lineCap = 'round';

 var startX,
     startY,
     x,
     y,
     borderWidth = 5,
     isDrawing = false,
     lines = [];

 $('body,html').mousedown(function(e){
   isDrawing = true;
   lines.push([]);
 })
 .mouseup(function(e){
   isDrawing = false;
 });

 $('#mycanvas,#stalker').mousemove(function(e){
   if(!isDrawing) return;
   x = e.pageX - $('#mycanvas').offset().left - borderWidth;
   y = e.pageY - $('#mycanvas').offset().top - borderWidth;

   lines[lines.length-1].push([x, y]);

 });

 function render() {
    ctx.clearRect(0, 0, 550, 500);

    for (const line of lines) {
        ctx.beginPath();
        for (const [i, pos] of Object.entries(line)) {
            if (!+i) {
                ctx.moveTo(pos[0], pos[1]);
            } else {
                ctx.lineTo(pos[0], pos[1]);
            }
        }
        ctx.stroke();
    }
 }

 (function loop() {
    render();
    requestAnimationFrame(loop);
 })();

});