jquery - 使用 Jquery 在画布中单击两次鼠标绘制一条线

Question

我已经看到了这个问题

在 HTML5 画布上单击两次鼠标画一条线？

我想要实现的实际上是相同的，但是使用 Jquery。

我目前已经尝试过了，但我想我不能使用两个嵌套的点击事件。

 $(function() {

 var worksheetCanvas = $('#worksheet-canvas');

 var context = worksheetCanvas.get(0).getContext("2d");


context.strokeStyle = "rgb(251, 243, 243)";


 worksheetCanvas.click(function(e) {

    context.beginPath();


    var xCoordFirst = e.pageX;
    var yCoordFirst = e.pageY;

    context.moveTo(xCoordFirst, yCoordFirst);


    worksheetCanvas.click(function(f) {

        var xCoordSecond = f.pageX;
        var yCoordSecond = f.pageY;

        context.lineTo(xCoordSecond , yCoordSecond );
        context.closePath();
        context.stroke();

     })

  })


 })​

此外，当我将一些静态值放入 时lineTo()，我得到了 this，它识别第二点的坐标，从而绘制线，即使如果用户不自己设置第二点，它也是无用的。

 $(function() {

 var worksheetCanvas = $('#worksheet-canvas');

 var context = worksheetCanvas.get(0).getContext("2d");


context.strokeStyle = "rgb(251, 243, 243)";


worksheetCanvas.click(function(e) {

    context.beginPath();


    var xCoordFirst = e.pageX;
    var yCoordFirst = e.pageY;

    context.moveTo(xCoordFirst, yCoordFirst);


    worksheetCanvas.click(function(f) {

        var xCoordSecond = f.pageX;
        var yCoordSecond = f.pageY;

        context.lineTo(20 , 30);
        context.closePath();
        context.stroke();

    })

 })


})​

Answer 1

var mouse = {
    x: -1,
    y: -1
};

$(document).ready(function(){
    var cvs = $("canvas")[0].getContext("2d");
    $("canvas").click(function(e){
        if(mouse.x != -1 && mouse.y != -1){
            cvs.beginPath();
            cvs.moveTo(mouse.x, mouse.y);
            cvs.lineTo(e.pageX, e.pageY);
            cvs.closePath();
            cvs.stroke();
            mouse.x = -1;
            mouse.y = -1;
        }else{
            mouse.x = e.pageX;
            mouse.y = e.pageY;
        }
    });
});