1

キャンバスに画像をロードするためのこの関数があります：

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

関数の最後の行

4

1 に答える 1

1

使用する方が良いかもしれません：

document.getElementsByClassName('test');

特定の共有クラスで必要な画像を持っています

于 2012-09-28T13:52:35.113 に答える