無法添加.onclick來圖像javascript

Question

我想在此圖像的頂部繪制一個副本，但要向下繪制，但.onclick不適用於我的圖像對象。 我已經對其進行了測試，它可以與canvas.onclick完美配合，但不能與我的圖像“粘滯”一起使用。

代碼如下：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");

var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {

    context.drawImage(sticky, 0, 0);
};

sticky.onclick = function() {

    context.drawImage(sticky, 0, 100);
};

</script>

Answer 1

您的活動需要在畫布上，而不是圖像上。 因為創建時圖像對象不會自動添加到dom中。

當畫布draw圖像時，它會復制圖像，並將像素復制到自身中。

因此，將您的圖像添加到dom中，並監聽畫布上的點擊。

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext("2d"); var sticky = new Image(); var sticky2 = new Image(); sticky.src = "http://lorempixel.com/250/60/"; sticky2.src = "http://lorempixel.com/150/60/"; sticky.onload = function() { context.drawImage(sticky, 0, 0); }; canvas.onclick = function() { context.drawImage(sticky2, 0, 100); }; 

 <canvas id="myCanvas"></canvas>