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