javascript - 更改变量以在 Canvas 上绘图

Question

我在 Canvas 和更改变量以分配不同的鼠标状态时遇到了一些问题。我在下面展示了我的代码的一部分。

$("#shape").click(function() {  //Runs the drawbackground function on click
    mouse_state = "fill_shape";
    console.log("shape: " + mouse_state);
});

$("#paint").click(function() {  //Runs the drawbackground function on click
    console.log('hi');
    mouse_state = "paint";
    console.log("paint: " + mouse_state);
});

var mouse_state = "paint";



if (myCanvas) { //Checks is canvas exists and/or is supported by the browser
    var isDown = false;  //Stores the current status of the mouseclick, default is not down
    var ctx = myCanvas.getContext("2d"); //Stores the 2d context of the canvas
    var canvasX, canvasY;  //Initialises variables canvasX and canvasY

    if (mouse_state == "paint"){
    $(myCanvas).mousedown(function(e) { //When the user clicks on the canvas, this function runs
        e.preventDefault();  //Prevents the cursor from changing when clicking on the canvas
        isDown = true; //Sets the mouseclick variable to down
        ctx.beginPath(); //Begins the path
        canvasX = e.pageX - myCanvas.offsetLeft; //Stores the mouse position on the x axis by subtracting the distance from the left edge of the canvas from the position from the left edge of the document.
        canvasY = e.pageY - myCanvas.offsetTop; //Stores the mouse position on the y axis by subtracting the distance from the top edge of the canvas from the position from the top edge of the document.
        ctx.moveTo(canvasX, canvasY);  //Sets the position which the drawing will begin
    }).mousemove(function(e) {
        if (isDown != false) { //On the mousemouse the line continues to be drawn as the mouseclick variable will still be set as false
            canvasX = e.pageX - myCanvas.offsetLeft; //Similar to above
            canvasY = e.pageY - myCanvas.offsetTop;
            ctx.lineTo(canvasX, canvasY); //Stores the information which should be drawn
            ctx.strokeStyle = current_colour; //Sets the colour to be drawn as the colour stored in the current colour variable
            ctx.stroke();  //Draws the path given
        }
    }).mouseup(function(e) {  //When the mouse click is released, do this function...
        isDown = false; //Sets the mouseclick variable to false
        ctx.closePath();  //Closes the path
    });
}

    else if(mouse_state == "fill_shape"){
    //Checks is canvas exists and/or is supported by the browser

    $(myCanvas).mousedown(function(ev) { //When the user clicks on the canvas, this function runs
         console.log("1" + mouse_state);
        ev.preventDefault();  //Prevents the cursor from changing when clicking on the canvas
        isDown = true; //Sets the mouseclick variable to down
        ctx.beginPath(); //Begins the path
        canvasX = ev.pageX - myCanvas.offsetLeft; //Stores the mouse position on the x axis by subtracting the distance from the left edge of the canvas from the position from the left edge of the document.
        canvasY = ev.pageY - myCanvas.offsetTop; //Stores the mouse position on the y axis by subtracting the distance from the top edge of the canvas from the position from the top edge of the document.
        ctx.moveTo(canvasX, canvasY);  //Sets the position which the drawing will begin
    }).mousemove(function(ev) {
        if (isDown != false) { //On the mousemouse the line continues to be drawn as the mouseclick variable will still be set as false
            canvasX = ev.pageX - myCanvas.offsetLeft; //Similar to above
            canvasY = ev.pageY - myCanvas.offsetTop;
            ctx.lineTo(canvasX, canvasY); //Stores the information which should be drawn
            ctx.strokeStyle = current_colour; //Sets the colour to be drawn as the colour stored in the current colour variable
            ctx.stroke();  //Draws the path given
        }
    }).mouseup(function(ev) {  //When the mouse click is released, do this function...
        ctx.fillStyle = current_colour;
        ctx.fill();
        isDown = false; //Sets the mouseclick variable to false
        ctx.closePath();  //Closes the path
    });



}};

Canvas 的绘制工作正常，两个不同的“mouse_states”工作正常，第一个(paint)简单地绘制线条或形状，第二个(fill_shape)绘制形状，然后使用 ctx.fill 填充它们。

mouse_state 变量初始化为“paint”，因此 Paint 函数运行，当我将其更改为“shape_fill”时，形状填充函数运行良好。当使用按钮更改变量名称在两种状态之间切换时，就会出现问题。控制台日志显示变量名称按预期更改，但它似乎没有任何影响并坚持 mouse_state 变量的初始值。如果有任何帮助或提示，我将不胜感激。

Answer 1

您在错误的时间运行了 if 语句 - 它们在页面加载时执行，随后仅绑定(bind)第一组事件。

相反，只绑定(bind)一组事件，并检查其中的变量并运行相应的代码:

if (myCanvas) { //Checks is canvas exists and/or is supported by the browser
  var isDown = false; //Stores the current status of the mouseclick, default is not down
  var ctx = myCanvas.getContext("2d"); //Stores the 2d context of the canvas
  var canvasX, canvasY; //Initialises variables canvasX and canvasY


  $(myCanvas).mousedown(function(e) { //When the user clicks on the canvas, this function runs
    if (mouse_state == "paint") {
       //code for paint
    } else if (mouse_state == "fill_shape") {
       //code for fill_shape    
    }
  }); //etc, for other events
}