javascript - 带有光标跟随器的 Canvas

Question

<分区>

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);
 })();

});