Question

我有这个功能在画布上加载图像：

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

图像加载很好，画布上还有其他图像，但是对于这个图像，当我使用任何控件移动或调整其他图像的大小时，这个图像就会消失。

加载我使用的图像：

<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');

并拥有特定共享类所需的图像

画布图像消失了

1 个答案: