html canvas一条线跟随鼠标

Question

所以我想做一条线跟随鼠标，并点击绘制该线，我需要这个绘制多边形。我的想法是每次鼠标移动时画一条线，但随后会弄乱很多线条，所以我决定在用白色线条移动鼠标并清理之后，画出过去的线条，这样只会有一条线条出现从最后一次点击到当前鼠标位置。 My jsFiddle for this.，但它不工作的方式，我想是的，我在点击绘制多边形，但没有线跟随鼠标，所以我不能看到我正在绘制的线。我不明白哪里错了？也许有一些现成的解决方案，我没有找到？我的代码：

var polygonX = []; 
    var polygonY = []; 
    var lineReady = 0; 
    var whileLineX; 
    var whiteLineY; 

    $("#body").bind('mousemove', function (ev) { 
     if (lineReady >= 2) { 

     var context; 
     //clear old lines 
     if (whiteLineX !== null && whiteLineY !== null) { 
      context = $("#canvas")[0].getContext('2d'); 
      context.moveTo(polygonX[lineReady - 1], polygonY[lineReady - 1]); 
      context.lineTo(whiteLineX, whiteLineY); 
      context.strokeStyle = '#ffffff'; 
      context.stroke(); 
     } 
     //draw a new line 
     context = $("#canvas")[0].getContext('2d'); 
     var offset = $('#body').offset(); 
     var x = ev.clientX - offset.left; 
     var y = ev.clientY - offset.top; 

     context.beginPath(); 
     context.moveTo(polygonX[lineReady - 1], polygonY[lineReady - 1]); 
     context.strokeStyle = '#000000'; 
     context.lineTo(x, y); 
     context.stroke(); 

     whileLineX = x; 
     whiteLineY = y; 

    } 
}); 


    $("#body").bind('click', function (ev) { 

     var offset = $('#body').offset(); 
     var x = ev.clientX - offset.left; 
     var y = ev.clientY - offset.top; 

     polygonX 

.push(x); 
    polygonY.push(y); 

    lineReady++; 
    if (lineReady >= 2) { 

     var context = $("#canvas")[0].getContext('2d'); 

     context.beginPath(); 
     context.moveTo(polygonX[lineReady - 2], polygonY[lineReady - 2]); 
     context.lineTo(polygonX[lineReady - 1], polygonY[lineReady - 1]); 
     context.stroke(); 

    } 

});` 

Answer 1

最好的方法是使用一点动画。

每当您绘制一条线时，将其坐标（第一个点和最后一个点）推入一个数组中。然后在每个动画循环中画出你的数组（查看this link，这将解释你如何动画） 。然后，您需要从数组的最后一行的最后一点绘制一条线，用红线表示，将线条拖动到鼠标位置。

这样做可以让你在任何时候都有一条红线跟随你的鼠标，给你一条线的“预览”。

ALGO明智它看起来像：

var arrayOflines = []; 

canvas.onclick -> 
    var coordinates = mouseposition() 
    arrayOfLines.push(coordinates) 

function mouseposition(){ 
    returns x and y of your mouse on the canvas 
} 

function draw(array){ 
    loop through array 
    draw line from array[0] to array[1], then from array[1] to array[2] on canvas 
} 

function drawPreview(){ 
    draw line from last point of arrayOflines to mouseposition; 
} 

//so here we are: 
function animationloop{ 

    erase your canvas 

    draw(arrayOfLines); //draw your array 
    drawPreview(); //draw your 'preview' line 

    requestAnimationFrame(animationloop); //animate 
} 

这样做，让将让你获得清晰​​的结果。