如何實(shí)現(xiàn)HTML5 Canvas的事件處理？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
DOM是Web前端領(lǐng)域非常重要的組成部分，不僅在處理HTML元素時(shí)會(huì)用到DOM，圖形編程也同樣會(huì)用到。比如SVG繪圖，各種圖形都是以DOM節(jié)點(diǎn)的形式插入到頁面中，這就意味著可以使用DOM方法對(duì)圖形進(jìn)行操作。比如有一個(gè)
Canvas的限制
在Canvas里，所有圖形都繪制在幀上，繪制方法不會(huì)將繪制好的圖形元素作為一個(gè)返回值輸出，js也無法獲取到已經(jīng)繪制好的圖形元素。比如：
復(fù)制代碼
代碼如下:
重慶分公司
重慶分公司
cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(theRect); //undefined這段代碼在canvas標(biāo)簽里繪制了一個(gè)矩形，首先可以看到繪制圖形的rect方法沒有返回值。如果打開瀏覽器的開發(fā)者工具，還可以看到canvas標(biāo)簽內(nèi)部沒有增加任何內(nèi)容，而在js里獲取到的canvas元素以及當(dāng)前的上下文，也都沒有任何表示新增圖形的內(nèi)容。
所以，前端常用的dom方法在canvas里是不適用的。比如點(diǎn)擊上面Canvas里的矩形，實(shí)際點(diǎn)擊的是整個(gè)Canvas元素。
給Canvas元素綁定事件
由于事件只能達(dá)到Canvas元素這一層，所以，如果想進(jìn)一步深入，識(shí)別點(diǎn)擊發(fā)生在Canvas內(nèi)部的哪一個(gè)圖形上，就需要增加代碼來進(jìn)行處理?；舅悸肥牵航oCanvas元素綁定事件，當(dāng)事件發(fā)生時(shí)，檢查事件對(duì)象的位置，然后檢查哪些圖形覆蓋了該位置。比如上面的例子里畫過一個(gè)矩形，該矩形覆蓋x軸10-110、y軸10-110的范圍。只要鼠標(biāo)點(diǎn)擊在這個(gè)范圍里，就可以視為點(diǎn)擊了該矩形，也就可以手動(dòng)觸發(fā)矩形需要處理的點(diǎn)擊事件。思路其實(shí)比較簡單，但是實(shí)現(xiàn)起來還是稍微有點(diǎn)復(fù)雜。不僅要考慮這個(gè)判斷過程的效率，有些地方還需要重新判斷事件類型，設(shè)置要重新定義一個(gè)Canvas內(nèi)部的捕獲和冒泡機(jī)制。
首先要做的，是給Canvas元素綁定事件，比如Canvas內(nèi)部某個(gè)圖形要綁定點(diǎn)擊事件，就需要通過Canvas元素代理該事件：
復(fù)制代碼
代碼如下:
cvs = document.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
//...
}, false);接下來需要判斷事件對(duì)象發(fā)生的位置，事件對(duì)象e的layerX和layerY屬性表示Canvas內(nèi)部坐標(biāo)系中的坐標(biāo)。但是這個(gè)屬性O(shè)pera不支持，Safari也打算移除，所以要做一些兼容寫法：
復(fù)制代碼
代碼如下:
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};
}//注：使用上面這個(gè)函數(shù)，需要給Canvas元素的position設(shè)為absolute。
現(xiàn)在有了事件對(duì)象的坐標(biāo)位置，下面就要判斷Canvas里的圖形，有哪些覆蓋了這個(gè)坐標(biāo)。
isPointInPath方法
Canvas的isPointInPath方法可以判斷當(dāng)前上下文的圖形是否覆蓋了某個(gè)坐標(biāo)，比如：
復(fù)制代碼
代碼如下:
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接下來增加一個(gè)事件判斷，就可以判斷一個(gè)點(diǎn)擊事件是否發(fā)生在矩形上：
復(fù)制代碼
代碼如下:
cvs.addEventListener('click', function(e){
p = getEventPosition(e);
if(ctx.isPointInPath(p.x, p.y)){
//點(diǎn)擊了矩形
}
}, false);以上就是處理Canvas事件的基本方法，但是上面的代碼還有局限，由于isPointInPath方法僅判斷當(dāng)前上下文環(huán)境中的路徑，所以當(dāng)Canvas里已經(jīng)繪制了多個(gè)圖形時(shí)，僅能以最后一個(gè)圖形的上下文環(huán)境來判斷事件，比如：
復(fù)制代碼
代碼如下:
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方法僅能識(shí)別當(dāng)前上下文環(huán)境里的圖形路徑，而之前繪制的路徑，無法回溯判斷。這種問題的解決方法是：當(dāng)點(diǎn)擊事件發(fā)生時(shí)，重繪所有圖形，每繪制一個(gè)就使用isPointInPath方法，判斷事件坐標(biāo)是否在該圖形覆蓋范圍內(nèi)。
循環(huán)重繪和事件冒泡
為了實(shí)現(xiàn)循環(huán)重繪，所以就要將圖形的基本參數(shù)事先保存下來：
復(fù)制代碼
代碼如下:
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();
});
}上面的代碼事先將兩個(gè)矩形的基本參數(shù)保存下來，每次調(diào)用draw方法，就會(huì)循環(huán)調(diào)用這些基本參數(shù)，用于繪制兩個(gè)矩形。這里還使用了clearRect方法，用于在重繪時(shí)清空畫布。接下來要做的是增加事件代理，以及在重繪時(shí)對(duì)每一個(gè)上下文環(huán)境使用isPointInPath方法：
復(fù)制代碼
代碼如下:
cvs.addEventListener('click', function(e){
p = getEventPosition(e);
draw(p);
}, false);事件發(fā)生時(shí)，將事件對(duì)象的坐標(biāo)傳給draw方法處理。這里還需要對(duì)draw方法做一些小改動(dòng)：
復(fù)制代碼
代碼如下:
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)){
//如果傳入了事件坐標(biāo)，就用isPointInPath判斷一下
//如果當(dāng)前環(huán)境覆蓋了該坐標(biāo)，就將當(dāng)前環(huán)境的index值放到數(shù)組里
who.push(i);
}
});
//根據(jù)數(shù)組中的index值，可以到arr數(shù)組中找到相應(yīng)的元素。
return who;
}在上面代碼中，點(diǎn)擊事件發(fā)生時(shí)draw方法會(huì)執(zhí)行一次重繪，并在重繪過程中檢查每一個(gè)圖形是否覆蓋了事件坐標(biāo)，如果判斷為真，則視為點(diǎn)擊了該圖形，并將該圖形的index值放入數(shù)組，最后將數(shù)組作為draw方法的返回值。在這種處理機(jī)制下，如果Canvas里有N個(gè)圖形，它們有一部分是重疊的，而點(diǎn)擊事件恰巧發(fā)生在這個(gè)重疊區(qū)域上，那么draw方法的返回?cái)?shù)組里會(huì)有N個(gè)成員。這時(shí)就有點(diǎn)類似事件冒泡的情況，數(shù)組的最后一個(gè)成員處于Canvas最上層，而第一個(gè)成員則在最下層，我們可以視為最上層的成員是e.target，而其他成員則是冒泡過程中傳遞到的節(jié)點(diǎn)。當(dāng)然這只是最簡單的一種處理方法，如果真要模擬DOM處理，還要給圖形設(shè)置父子級(jí)關(guān)系。
以上就是Canvas事件處理的基本方法。在實(shí)際運(yùn)用時(shí)，如何緩存圖形參數(shù)，如何進(jìn)行循環(huán)重繪，以及如何處理事件冒泡，都還需要根據(jù)實(shí)際情況花一些心思去處理。另外，click是一個(gè)比較好處理的事件，相對(duì)麻煩的是mouseover、mouseout和mousemove這些事件，由于鼠標(biāo)一旦進(jìn)入Canvas元素，始終發(fā)生的都是mousemove事件，所以如果要給某個(gè)圖形單獨(dú)設(shè)置mouseover或mouseout，還需要記錄鼠標(biāo)移動(dòng)的路線，給圖形設(shè)置進(jìn)出狀態(tài)。由于處理的步驟變得復(fù)雜起來，必須對(duì)性能問題提高關(guān)注。
看完上述內(nèi)容，你們掌握如何實(shí)現(xiàn)HTML5 Canvas的事件處理的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！
