單擊鼠標時HTML5畫布繪制矩形

Question

我有一個在選定圖像中加載的畫布。 畫布應在用戶單擊的地方顯示2個6x6矩形。 第一次單擊時，矩形應為紅色，第二次單擊時應為藍色，第三次單擊時，將其重置（刪除第一個矩形），依此類推。如此工作正常（請參見示例： http：// jsfiddle。凈/ 8HSGG / ）

我的問題是，當我重新加載圖像時，矩形開始混亂（即顏色以不同順序出現或根本不顯示）。

我在Javascript中有兩個變量：topLeft和bottomRight，它們在每次加載圖像時都為null，然后根據這些變量進行檢查並相應地繪制。

知道發生了什么嗎？

Answer 1

每次“處理”圖像時，都將click和mouseover事件偵聽器添加到畫布。 因此，我懷疑您正在獲得被多次調用的代碼。