了解canvas這個標籤後，會發現在乙個canvas類似乙個img，在canvas中繪製的圖形都是乙個整體，所有的事件也都是發生在這乙個標籤上，沒有辦法直接判斷事件是發生在canvas中的某個圖形上。但是通過canvas中的路徑的概念可以解決這個問題。
關鍵：通過路徑來繪製圖形，用每乙個圖形是乙個路徑，事件繫結在canvas標籤上，獲得事件的發生的x，y座標。再通過 ispointinpath（），來判斷點（x，y）是否在路徑內，需要注意的是ispointinpath（）只對當前路徑（currentpath） 有效，並且經測試發現，只對當前路徑的第乙個子路徑有效（subpath，乙個currentpath可以有多個subpath）。關於路徑的詳細解釋可 以看看canvas的api文件。
具體的判斷就是，當事件觸發時，對canvas中的內容進行重繪，每重回乙個路徑中的圖形，用 ispointinpath（）判斷一次，如果在路徑內，執行相應的操作。
如下面的例子，可以拖動乙個canvas標籤中繪製的多個圓中的任乙個。
讓 Canvas 更加優雅
繪製圖形時，長度與座標應選取整數而不是浮點數，原因在於 canvas 支援半個畫素繪製。會根據小數字實現插值演算法實現繪製影象的反鋸齒效果，如果沒有必要請不要選擇浮點數值。一般在遊戲中這個優化方式會經常使用，但是在我們的背景特效中不經常使用，這個優化方式是將經常移動的元素和不經常移動的元素分層，避免...
canvas之滑鼠事件
canvas的滑鼠事件無法直接獲取滑鼠在canvas上的座標，所獲得的座標是相對於整個螢幕的座標，所以，想得到滑鼠在canvas上的座標時，就必須進行轉換。使用getboundingclientrect方法，得到canvas在螢幕上的位置及大小資訊 clientrect bottom 486 hei...
JQuery事件支援
jquery 擁有比較簡潔的事件支援，我們只需要寫少量js 就可以處理頁面的事件。以下為乙個事件例項 just hi 從這個例子中可以看出，因為有了jquery強大的選擇器，包括一些實用方法，使得這個原本繁雜的js 變的簡潔了許多。而且此 還可以繼續的縮減。現在有了jquery，我們可以讓事件處理變...