javascript - Canvas 图像消失

Question

我有这个函数可以在 Canvas 上加载图像:

function myImage() {
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=document.getElementById("image");
  ctx.drawImage(img,0,0);
}

图像加载正常，并且 Canvas 上还有其他图像，但是对于此图像，当我使用任何控件移动其他图像或调整其他图像的大小时，此图像会消失。

加载我使用的图像:

<img id="image"  src="1.png" width="64" height="64" onclick="myImage(this)">

我更新了功能:

function myImage() {
  var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");
  var img=document.getElementsByClassName("test");
  ctx.drawImage(img,0,0);
}

和图像

<img class="test" src="1.png" width="64" height="64" onclick="myImage(this)">
<img class="test" src="2.png" width="64" height="64" onclick="myImage(this)">
<img class="test" src="3.png" width="64" height="64" onclick="myImage(this)">

但我收到此错误:

Uncaught TypeError: Type error 
myImage
onclick

在函数的最后一行

Answer 1

也许更好用:

document.getElementsByClassName('test');

并拥有您想要的特定共享类的图像