畫布繪畫應用程序不是繪圖（Javascript）

我想使用JavaScript做一個基本的繪畫應用程序。如果鼠標在畫布上繪製，並且只有當鼠標被按下時。我的問題似乎與變量lastX和lastY有關。這些變量應該是鼠標指針的當前座標，但它們在鼠標單擊時拾取座標，而不是鼠標移動時拾取座標。這些變量應該隨着鼠標的移動而動態變化，並因此而變化。畫布繪畫應用程序不是繪圖（Javascript）

我知道如果將lastX和lastY設置爲整數，那麼當我單擊畫布時，它會繪製一條直線到這些座標。我一定錯過了一些東西，因爲測試時我沒有看到代碼的錯誤，只是不工作！

有人可以幫忙解釋我哪裏出了問題嗎？

var mycanvas= document.getElementById("canvas"); 
var Line = mycanvas.getContext("2d"); 

// Mouse Coordinates 
var x; 
var y; 

// Mousedown - Drawing 
mycanvas.addEventListener("mousedown",function(e){console.log("Draw"); 

    x = e.pageX - this.offsetLeft; 
    y = e.pageY - this.offsetTop; 

    mousePressed = true; 

    Draw(x, y, true) 


      return false;        
    }); 

// draw function  

function Draw() 
{ 

Line.beginPath(); 
Line.strokeStyle = "#000000"; 
Line.lineWidth =10; 
Line.lineJoin = "round"; 
Line.moveTo(lastX, lastY); 
Line.lineTo(x, y); 
Line.closePath(); 
Line.stroke(); 

var lastY = y; 
var lastX = x; 

};

來源

2015-12-02 Tom Fenton

您需要改用鼠標按下的mousemove事件。

儘管您的代碼還有其他幾個問題。你正在調用Draw（x，y，true），但是你沒有任何參數定義Draw。此外，您在Draw的底部聲明lastX和lastY爲局部變量，但在Line.moveTo（lastX，lastY）中聲明的位置上方使用它們。在調用Draw（x，y，true）之後，您還會丟失一個分號。

來源

2015-12-02 00:45:14 Comptonburger

畫布繪畫應用程序不是繪圖（Javascript）

回答

相關問題