使用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); 
    }); 
});