使用Canvas和jQuery繪製鼠標點擊之間的直線

Question

我想在Canvas中用jQuery繪製一條線，並用鼠標單擊來定義起始位置。 每增加一次鼠標點擊，我想從前一個位置繼續我的生產線。

我寫了一些代碼，但問題是我的行不是從mouseClick位置開始的;它從默認值（0，0）開始。我必須更改什麼才能讓我的線條從鼠標點擊位置開始？

謝謝。

這裏是我的代碼：

var click = [0, 0]; 

contex.beginPath(); 
contex.moveTo(click[0], click[1]); 
contex.lineTo(x, y); 
contex.stroke(); 
click = [x, y]; 

Answer 1

通過點擊在畫布上繪製一系列直線：

JSFiddle demo

HTML

<canvas id="myCanvas" width="600" height="600"></canvas> 

jQuery的

var needFirstPoint = true; 

function drawNextLine(ctx, x, y) { 
    if (needFirstPoint) { 
     ctx.lineWidth = 5; 
     ctx.beginPath(); 
     ctx.moveTo(x, y); 
     needFirstPoint = false; 
    } 
    else { 
     ctx.lineTo(x, y); 
     ctx.stroke(); 
    } 
} 

$(document).ready(function(){ 
    var canvas = $('#myCanvas').get(0); 
    if (!canvas.getContext) { return; } 
    var ctx = canvas.getContext('2d'); 

    $('#myCanvas').on('click', function(e){ 
     var offset = $(this).offset(); 
     var x = e.pageX - offset.left; 
     var y = e.pageY - offset.top; 
     drawNextLine(ctx, x, y); 
    }); 
});