如何在Javascript中使用鼠標事件在畫布上繪畫

Question

我正在嘗試創建一個畫布，允許我使用鼠標事件在其上繪制矩形。 與Windows中選擇的工作方式非常相似，我希望能夠在頁面上的任意位置單擊，向左/向右/向上/向下拖動，然后釋放后，將繪制一個帶有起始坐標（x1和y1）的矩形在mousedown上mousedown ，在mouseup上使用結束坐標（x2，y2）。

我一直在嘗試創建綁定到畫布的eventListener ，它們分別返回mousedown和mouseup的開始和結束坐標，但是我的變量保持未定義狀態。

我的畫布跨越了窗口的整個長度，因此無需考慮相對位置。 同樣，該解決方案必須使用純Javascript來實現，不允許使用JQuery。

謝謝您的幫助！

Answer 1

更新

忽略下面的大部分內容，重新閱讀您的問題，似乎您已扎根理論。 您的問題很可能是缺少mousedown和mouseup函數參數。 嘗試以下方法；

document.getElementsByTagName('canvas')[0].addEventListener('mousedown', function(e){
 // I THINK IT'S THE e ON THE LINE ABOVE THIS THAT YOU'RE MISSING.
 // YOU CAN THEN ACCESS THE POSITION OF THE MOUSE USING;

 mouse.x = e.pageX;
 mouse.Y = e.pageY;
})

我不會為您編寫代碼，但是我可以為您提供理論。

將鼠標的x和y變量存儲在諸如mouse = {}的對象中。

將事件偵聽器添加到畫布中以使鼠標向下（單擊），並將e.pageX和e.pageY存儲在mouse.firstX和mouse.firstY中。 使用類似：

document.getElementsByTagName('canvas')[0].addEventListener('mousedown', function(e){ mouse.firstX = e.pageX; mouse.firstY = e.pageY; })

為mouseup的畫布創建第二個事件偵聽器，並將這組e.pageX和e.pageY存儲在mouse.secondX和mouse.secondY中。

計算firstX和secondX，firstY和secondY之間的差，以得出矩形聲音。

var width = mouse.firstX + mouse.secondX // rect width

var height = mouse.firstY + mouse.secondY // rect height

然后，使用這些計算，使用firstX和firstY作為位置參數在畫布上繪制一個矩形。

我希望這相對清晰，對您有幫助。 如果沒有，這可能會有所幫助；

http://simonsarris.com/blog/140-canvas-moving-selectable-shapes