Question

我想在画布上画画。（就像在油漆中）但我的代码不起作用。函数mousedown验证是否单击了鼠标并在向量中添加坐标。虽然它没有在画布上绘制任何东西。我在一个向量中存储坐标，我试图用重绘函数绘制。

$(document).ready(function() {


    var ok = false;
    var clickX = new Array(); 
    var clickY = new Array(); 
    var clickDrag = new Array(); 

    var context = document.getElementById('Canvas').getContext("2d");
    console.log(context);
    $('#canvas').mousedown(function(e)
    {
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;

        ok = true;
        addClick(mouseX, mouseY);
        redraw();

    });

    $('#canvas').mousemove(function(e)
    {
        if(ok!=false)
        {
            addClick(mouseX, mouseY, true);
            redraw();
        }
    });

    $('#canvas').mouseup(function(e)
    {
        ok = false;
    });
    $('#canvas').mouseleave(function(e)
    {
        ok = false;
    });

    function addClick(x, y, dragging)
    {
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);

    }

    function redraw()
    {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height); 

        context.strokeStyle = "#df4b26";
        context.lineJoin = "round";
        context.lineWidth = 5;

         for(var i=0; i < clickX.length; i++) 
         {      
             context.beginPath();
            if(clickDrag[i] && i)
            {
                 context.moveTo(clickX[i-1], clickY[i-1]);
            }
            else
            {
                 context.moveTo(clickX[i]-1, clickY[i]);
            }
            context.lineTo(clickX[i], clickY[i]);
            context.closePath();
            context.stroke();
        }
    }

});

Answer 1

有几个问题：

jQuery的选择器区分大小写，因此您必须使用$('#Canvas')
您需要在mousemove处理程序中计算鼠标位置。

重构代码：

var ok = false;
var clickX = new Array(); 
var clickY = new Array(); 
var clickDrag = new Array(); 

var context = document.getElementById('Canvas').getContext("2d");
console.log(context);
$('#Canvas').mousedown(function(e)
{
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    ok = true;
    addClick(mouseX, mouseY);
    redraw();

});

$('#Canvas').mousemove(function(e)
{
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    if(ok!=false)
    {
        addClick(mouseX, mouseY, true);
        redraw();
    }
});

$('#Canvas').mouseup(function(e)
{
    ok = false;
});
$('#Canvas').mouseleave(function(e)
{
    ok = false;
});

function addClick(x, y, dragging)
{
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);

}

function redraw()
{
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 

    context.strokeStyle = "#df4b26";
    context.lineJoin = "round";
    context.lineWidth = 5;

     for(var i=0; i < clickX.length; i++) 
     {      
         context.beginPath();
        if(clickDrag[i] && i)
        {
             context.moveTo(clickX[i-1], clickY[i-1]);
        }
        else
        {
             context.moveTo(clickX[i]-1, clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.stroke();
    }
}

body{ background-color: ivory; }
canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="Canvas" width=300 height=300></canvas>

JavaScript Canvas绘图免费

1 个答案: