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 
} 

這樣做，讓將讓你獲得清晰​​的結果。