Question

这可能是一个愚蠢的＆amp;显而易见的问题，但有没有人知道如何使用下拉菜单或单选按钮更改画布中显示的图像？

因此，如果我有一个红色阴天图像，我想用绿色阴天图像替换它，使用下拉/收音机，我该怎么做？

Answer 1

使用dropDown菜单或radiobutton的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);
}

HTML5 - 使用下拉菜单或单选按钮切换图像

1 个答案: