javascript - HTML5-ドロップダウンメニューまたはラジオボタンを使用した画像の切り替え

Question

これはおそらくばかげた明白な質問ですが、ドロップダウンメニューまたはラジオボタンを使用してキャンバスに表示されている画像を変更する方法を知っている人はいますか？

したがって、赤い曇りの画像があり、ドロップダウン/ラジオを使用して、たとえば緑の曇りの画像に置き換えたい場合は、どうすればよいですか？

Answer 1

ドロップダウン メニューまたはラジオボタンの onChange-Event を使用して JavaScript 関数を呼び出し、それに画像の名前を渡します。

<input type="radio" name="cloud" value="red" onChange="javascript:imgChange('red.gif')"> Red cloud<br>
<input type="radio" name="cloud" value="blue" onChange="javascript:imgChange('blue.gif')"> Blue cloud<br>
<input type="radio" name="cloud" value="green" onChange="javascript:imgChange('green.gif')"> green cloud

JavaScript を使用して、画像を変更する関数を作成できるようになりました。

function imgChange(var img){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img = new Image;
    // set your image according to the parameter
    ctx.drawImage(img,10,10);
}