使用Canvas和jQuery绘制鼠标点击之间的直线



我想用jQuery在画布上画一条线,并通过鼠标单击定义起始位置。在每次额外的鼠标点击时,我都想从前一个位置继续我的线。

我写了一些代码,但问题是,我的行不从鼠标点击位置开始;它从默认值(0,0)开始。我需要做些什么才能使我的行从鼠标单击的位置开始?

谢谢。下面是我的代码:

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

点击画布绘制一系列直线:

JSFiddle演示

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

最新更新