Canvas HTML5在多個圖像上單擊事件

Question

我的畫布中有多個圖像。我有一個大的形象，在這個我有其他的圖像。我拿着這個fiddle example。

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main); 
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main); 

var imagesLoaded = 0; 
function main() { 
    imagesLoaded += 1; 

    if(imagesLoaded == 2) { 
     // composite now 
     ctx.drawImage(img1, 0, 0); 

     ctx.globalAlpha = 0.5; 
     ctx.drawImage(img2, 0, 0); 
    } 
} 

function loadImage(src, onload) { 
    // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being- called 
    var img = new Image(); 

    img.onload = onload; 
    img.src = src; 

    return img; 
} 

畫布HTML5對我來說是全新的。那麼如何在畫布中的每個圖像上設置點擊事件？

Answer 1

當您將圖像繪製到畫布上時，它不會作爲圖像添加到其中，而是作爲一組顏色值添加到其中。之後無法檢查哪個像素採用哪種顏色的哪種操作。事件處理超出了畫布的範圍。

你可以做的是建立你自己的點擊事件處理代碼。

當您將圖像繪製到畫布上時，保存座標，寬度和高度。然後在一般情況下爲canvas.onclick添加一個偵聽器，並讓處理函數比較鼠標座標和保存的座標。