更改變量以在畫布上繪製

Question

我遇到了幾個畫布問題，並更改了變量以分配不同的鼠標狀態。我在下面顯示了我的一段代碼。

$("#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 
    }); 



}}; 

畫布的繪製工作正常，並在兩個不同的「mouse_states」與第一（漆）工作細簡單地繪製線條或形狀和第二（fill_shape）的描繪形狀，然後在使用CTX填充它們。填。

mouse_state變量初始化爲「paint」，所以paint函數運行，當我將其更改爲「shape_fill」時，shape fill函數運行良好。使用按鈕更改變量名稱時，在兩個狀態之間切換時會出現問題。控制檯日誌顯示變量名稱如預期的那樣改變，但它似乎沒有任何影響並且堅持使用mouse_state變量的初始值。我將不勝感激任何幫助或提示。

Answer 1

您在錯誤的時間運行if語句 - 它們在頁面加載時執行，隨後僅綁定第一組事件。

相反，綁定只有一組事件，並檢查在其中的變量，並運行相應的代碼：

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 
}