本篇內(nèi)容介紹了“如何處理HTML5 Canvas的事件”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

站在用戶的角度思考問題，與客戶深入溝通，找到偏關網(wǎng)站設計與偏關網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站制作、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋偏關地區(qū)。

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

Canvas的限制

在Canvas里，所有圖形都繪制在幀上，繪制方法不會將繪制好的圖形元素作為一個返回值輸出，js也無法獲取到已經(jīng)繪制好的圖形元素。比如：

代碼如下:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(theRect);     //undefined

這段代碼在canvas標簽里繪制了一個矩形，首先可以看到繪制圖形的rect方法沒有返回值。如果打開瀏覽器的開發(fā)者工具，還可以看到canvas標簽內(nèi)部沒有增加任何內(nèi)容，而在js里獲取到的canvas元素以及當前的上下文，也都沒有任何表示新增圖形的內(nèi)容。

所以，前端常用的dom方法在canvas里是不適用的。比如點擊上面Canvas里的矩形，實際點擊的是整個Canvas元素。

給Canvas元素綁定事件

由于事件只能達到Canvas元素這一層，所以，如果想進一步深入，識別點擊發(fā)生在Canvas內(nèi)部的哪一個圖形上，就需要增加代碼來進行處理?；舅悸肥牵航oCanvas元素綁定事件，當事件發(fā)生時，檢查事件對象的位置，然后檢查哪些圖形覆蓋了該位置。比如上面的例子里畫過一個矩形，該矩形覆蓋x軸10-110、y軸10-110的范圍。只要鼠標點擊在這個范圍里，就可以視為點擊了該矩形，也就可以手動觸發(fā)矩形需要處理的點擊事件。思路其實比較簡單，但是實現(xiàn)起來還是稍微有點復雜。不僅要考慮這個判斷過程的效率，有些地方還需要重新判斷事件類型，設置要重新定義一個Canvas內(nèi)部的捕獲和冒泡機制。

首先要做的，是給Canvas元素綁定事件，比如Canvas內(nèi)部某個圖形要綁定點擊事件，就需要通過Canvas元素代理該事件：

代碼如下:

cvs = document.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
 //...
}, false);

接下來需要判斷事件對象發(fā)生的位置，事件對象e的layerX和layerY屬性表示Canvas內(nèi)部坐標系中的坐標。但是這個屬性Opera不支持，Safari也打算移除，所以要做一些兼容寫法：

代碼如下:

function getEventPosition(ev){
 var x, y;
 if (ev.layerX || ev.layerX == 0) {
   x = ev.layerX;
   y = ev.layerY;
 } else if (ev.offsetX || ev.offsetX == 0) { // Opera
   x = ev.offsetX;
   y = ev.offsetY;
 }
 return {x: x, y: y};
}
//注：使用上面這個函數(shù)，需要給Canvas元素的position設為absolute。

現(xiàn)在有了事件對象的坐標位置，下面就要判斷Canvas里的圖形，有哪些覆蓋了這個坐標。

isPointInPath方法

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

代碼如下:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(50, 50);     //true
ctx.isPointInPath(5, 5);     //false

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

代碼如下:

cvs.addEventListener('click', function(e){
 p = getEventPosition(e);
 if(ctx.isPointInPath(p.x, p.y)){
   //點擊了矩形
 }
}, false);

以上就是處理Canvas事件的基本方法，但是上面的代碼還有局限，由于isPointInPath方法僅判斷當前上下文環(huán)境中的路徑，所以當Canvas里已經(jīng)繪制了多個圖形時，僅能以最后一個圖形的上下文環(huán)境來判斷事件，比如：

代碼如下:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(20, 20);     //true
ctx.beginPath();
ctx.rect(110, 110, 100, 100);
ctx.stroke();
ctx.isPointInPath(150, 150);     //true
ctx.isPointInPath(20, 20);     //false

從上面這段代碼可以看到，isPointInPath方法僅能識別當前上下文環(huán)境里的圖形路徑，而之前繪制的路徑，無法回溯判斷。這種問題的解決方法是：當點擊事件發(fā)生時，重繪所有圖形，每繪制一個就使用isPointInPath方法，判斷事件坐標是否在該圖形覆蓋范圍內(nèi)。

循環(huán)重繪和事件冒泡

為了實現(xiàn)循環(huán)重繪，所以就要將圖形的基本參數(shù)事先保存下來：

代碼如下:

arr = [
 {x:10, y:10, width:100, height:100},
 {x:110, y:110, width:100, height:100}
];

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');

draw();

function draw(){
 ctx.clearRech(0, 0, cvs.width, cvs.height);
 arr.forEach(function(v){
   ctx.beginPath();
   ctx.rect(v.x, v.y, v.width, v.height);
   ctx.stroke();
 });
}

上面的代碼事先將兩個矩形的基本參數(shù)保存下來，每次調(diào)用draw方法，就會循環(huán)調(diào)用這些基本參數(shù)，用于繪制兩個矩形。這里還使用了clearRect方法，用于在重繪時清空畫布。接下來要做的是增加事件代理，以及在重繪時對每一個上下文環(huán)境使用isPointInPath方法：

代碼如下:

cvs.addEventListener('click', function(e){
 p = getEventPosition(e);
 draw(p);
}, false);

事件發(fā)生時，將事件對象的坐標傳給draw方法處理。這里還需要對draw方法做一些小改動：

代碼如下:

function draw(p){
 var who = [];
 ctx.clearRech(0, 0, cvs.width, cvs.height);
 arr.forEach(function(v, i){
   ctx.beginPath();
   ctx.rect(v.x, v.y, v.width, v.height);
   ctx.stroke();
   if(p && ctx.isPointInPath(p.x, p.y)){
     //如果傳入了事件坐標，就用isPointInPath判斷一下
     //如果當前環(huán)境覆蓋了該坐標，就將當前環(huán)境的index值放到數(shù)組里
     who.push(i);
   }
 });
 //根據(jù)數(shù)組中的index值，可以到arr數(shù)組中找到相應的元素。
 return who;
}

在上面代碼中，點擊事件發(fā)生時draw方法會執(zhí)行一次重繪，并在重繪過程中檢查每一個圖形是否覆蓋了事件坐標，如果判斷為真，則視為點擊了該圖形，并將該圖形的index值放入數(shù)組，最后將數(shù)組作為draw方法的返回值。在這種處理機制下，如果Canvas里有N個圖形，它們有一部分是重疊的，而點擊事件恰巧發(fā)生在這個重疊區(qū)域上，那么draw方法的返回數(shù)組里會有N個成員。這時就有點類似事件冒泡的情況，數(shù)組的最后一個成員處于Canvas最上層，而第一個成員則在最下層，我們可以視為最上層的成員是e.target，而其他成員則是冒泡過程中傳遞到的節(jié)點。當然這只是最簡單的一種處理方法，如果真要模擬DOM處理，還要給圖形設置父子級關系。

“如何處理HTML5 Canvas的事件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

網(wǎng)站名稱：如何處理HTML5Canvas的事件-創(chuàng)新互聯(lián)
新聞來源：http://jinyejixie.com/article42/ghohc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、用戶體驗、域名注冊、云服務器、網(wǎng)頁設計公司、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)