无法将 .onclick 添加到图像 javascript答案

【问题标题】：can't add .onclick to image javascript无法将 .onclick 添加到图像 javascript
【发布时间】：2014-11-30 06:07:10
【问题描述】：

我想在其上绘制此图像的副本，但要往下绘制，但 .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>

【问题讨论】：

在画布上绘制图像后，它不再是元素，而是像素。
stackoverflow.com/questions/15331264/…
这是有道理的，但是如果我希望用户能够单击“粘性”图像并在其上显示另一个图像，我的代码应该如何显示？任何人都可以举一个我正在尝试做的解决方法的例子吗？
试一试jsfiddle.net/cha16b8y/1

标签： javascript html canvas onclick drawimage

【解决方案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);
};

&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;

【讨论】：

我会将 body.appendChild(sticky); 放在哪里？无论我放在哪里，它仍然无法正常工作......
谢谢！该代码现在可以工作，但是有两个错误。首先，我的画布下方有第二个“粘性”图像，仅在我向 dom 添加“粘性”并且我想让它消失时才出现。第二，当我不断点击它时，它是否不断在（0,100）处绘制图像？如果没有，我如何让它无限地做那个？
Define 'ad infinitum'，你的意思是 (0, 100n)？
如果你不需要的话，你不需要将你的图像添加到 dom 中。您只需要聆听画布上的点击。（更新了我的答案）另外，每次点击前一个draw上的draw。