HTML5 Canvas的事件處理介紹

DOM是Web前端領域非常重要的組成部分，不僅在處理HTML元素時會用到DOM，圖形程式設計也同樣會用到。例如SVG繪圖，各種圖形都是以DOM節點的形式插入頁面中，這意味著可以使用DOM方法對圖形進行操作。例如有一個元素，可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而這種DOM處理方法在HTML5的Canvas裡不再適用，Canvas使用的是另外一套機制，無論在Canvas上繪製多少圖形，Canvas都是一個整體，圖形本身實際上都是Canvas的一部分，不可單獨獲取，所以也就無法直接為某個圖形增加javaScript事件。

　　在Canvas裡，所有圖形都繪製在幀上，繪製方法不會將繪製好的圖形元素作為一個回傳值輸出，js也無法取得到已經繪製好的圖形元素。

　　cvs = document.getElementById('mycanvas');

　　ctx = canvas.getContext('2d');

　　theRect = ctx.r. stroke();

　　console.log(theRect); //undefined

　　這段程式碼在canvas標籤裡繪製了一個矩形，首先可以看到繪製圖形的rect方法沒有回傳值。看到canvas標籤內部沒有增加任何內容，而在js裡獲取到的canvas元素以及當前的上下文，也都沒有任何表示新增圖形的內容。的。在Canvas內部的哪一個圖形上，就需要增加程式碼來處理。例子裡畫過一個矩形，該矩形覆蓋x軸10-110、y軸10-110的範圍。只要滑鼠點擊在這個範圍裡，就可以視為點擊了該矩形，也就可以手動觸發矩形需要處理的點選事件。首先要做的，是給Canvas元素綁定事件，例如Canvas內部某個圖形要綁定點擊事件，就需要透過Canvas元素代理該事件：

　　程式碼如下:

　　cvs = document.getElementById('mycanvas' );

　　cvs.addEventListener('click', function(e){

　　//...

　　}, false);屬性表示Canvas內部座標系中的座標。但是這個屬性Opera不支持，Safari也打算移除，所以要做一些相容寫法：

　　程式碼如下:

　　function getEventPosition(ev){

　　var x, 3evervar x, ||yevol x. .layerX == 0) {

　　x = ev.layerX;

　　y = ev.layerY;

　　} else if (ev.offsetX ||ev.OwysetX || offsetX || offsetX ||. .offsetX;

　　y = ev.offsetY;

　　}

　　return {x: x, y: y};

　　}

　　//注：使用上面這個函數，需要給Canvas元素的position設為absolute 。

　　現在有了事件物件的座標位置，下面就要判斷Canvas裡的圖形，有哪些覆蓋了這個座標。

　　isPointInPath方法

　　Canvas的isPointInPath方法可以判斷當前上下文的圖形是否覆寫了某個座標，例如：

　　程式碼x = canvas.getContext ('2d');

　　ctx.rect(10, 10, 100, 100);

　　ctx.stroke();

　　x.isPointInPathf545,70,0,050,40,45)PointP. , 5); //false

　　接下來增加一個事件判斷，就可以判斷一個點擊事件是否發生在矩形上：

　　程式碼如下:

　　cvs.addEventListener('clicklickS. p = getEventPosition(e);

　　if(ctx.isPointInPath(p.x, p.y)){

　　//點擊了矩形

〜〜}🀟方法，但是上面的程式碼還有限制，由於isPointInPath方法只判斷當前上下文環境中的路徑，所以當Canvas裡已經繪製了多個圖形時，僅能以最後一個圖形的上下文環境來判斷事件，例如：

　　程式碼如下:

　　cvs = document.getElementById('mycanvas');

　　ctx = canvas.getContext('2d');

　,0.1,0,05%; 100);

　　ctx.stroke();

　　ctx.isPointInPath(20, 20); //true

　　ctx.beginPath();

㟎　　ctx.beginPath()；

　　ctx.stroke( );

　　ctx.isPointInPath(150, 150); //true

　　ctx.isPointInPath(20, 20); //false

　　　　的圖形路徑，而之前繪製的路徑，無法回溯判斷。這種問題的解決方法是：當點擊事件發生時，重繪所有圖形，每繪製一個就使用isPointInPath方法，判斷事件座標是否在該圖形覆蓋範圍內。

　　循環重繪與事件冒泡

　　為了實現循環重繪，所以就要將圖形的基本參數事先保存下來：

　　程式碼如下:

:1,　、、〜〜〜:10　、〜　〟〜〟〜〟〜〟〦〦〕 width:100, height:100},

　　{x:110, y:110, width:100, height:100}

　　];

〜『　ctx = canvas .getContext('2d');

　　draw();

　　function draw(){

　　ctx.clearRech(0, 0, cvs

　　ctx.clearRech(0, 0, cvs.wid.cvs. {

　　ctx.beginPath();

　　ctx.rect(v.x, v.y, v.width, v.height);

　　ctx.stroke();

　　上面的程式碼事先將兩個矩形的基本參數儲存下來，每次呼叫draw方法，就會循環呼叫這些基本參數，用於繪製兩個矩形。這裡也使用了clearRect方法，用於在重繪時清空畫布。接下來要做的是增加事件代理，以及在重繪時對每一個上下文環境使用isPointInPath方法：

　　程式碼如下:

　　cvs.addEventListener('click', function(e){

〜〜『 e);

　　draw(p);

　　}, false);

　　事件發生時，將事件物件的座標傳給draw方法處理。這裡也需要對draw方法做一些小改動：

　　程式碼如下:

　　function draw(p){

　　var who = [];

, cv. ;

　　arr.forEach(function(v, i){

　　ctx.beginPath();

　　ctx.rect(v.x『

　　if(p && ctx.isPointInPath(p.x, p.y)){

　　//如果傳入了事件座標，就用isPointInPath判斷一下

　　//如果當前環境覆蓋了該座標放到數組裡

　　who.push(i);

　　}

　　});

　　//根據數組中的index值，可以找到到數組中的附加元素。

　　}

　　在上面程式碼中，點擊事件發生時draw方法會執行一次重繪，並在重繪過程中檢查每一個圖形是否覆蓋了事件坐標，如果為真，則為真為了點擊該圖形，並將該圖形的index值放入數組，最後將數組作為draw方法的回傳值。在這種處理機制下，如果Canvas裡有N個圖形，它們有一部分是重疊的，而點擊事件剛好發生在這個重疊區域上，那麼draw方法的回傳陣列裡會有N個成員。這時就有點類似事件冒泡的情況，數組的最後一個成員處於Canvas最上層，而第一個成員則在最下層，我們可以視為最上層的成員是e.target，而其他成員則是冒泡過程中傳遞到的節點。當然這只是最簡單的處理方法，如果真要模擬DOM處理，也要給圖形設定父子級關係。

　　以上就是Canvas事件處理的基本方法。在實際運用時，如何快取圖形參數，如何進行循環重繪，以及如何處理事件冒泡，都還需要根據實際情況花一些心思去處理。另外，click是一個比較好處理的事件，相對麻煩的是mouSEOver、mouseout和mousemove這些事件，由於滑鼠一旦進入Canvas元素，始終發生的都是mousemove事件，所以如果要給某個圖形單獨設定mouseover或mouseout ，還需要記錄滑鼠移動的路線，給圖形設定進出狀態。由於處理的步驟變得複雜起來，必須對效能問題提高關注。

 以上就是HTML5 Canvas的事件處理介紹內容，更多相關文章請關注PHP中文網（www.php.cn）！