HTML5 - 使用下拉菜單或單選按鈕

Question

這可能是一個愚蠢的&明顯的問題，但沒有人知道使用下拉菜單或單選按鈕顯示在畫布如何改變圖像切換圖像？

所以，如果我有一個紅色的渾濁形象，我想用，說來取代它，一個綠色的渾濁的圖像，使用下拉菜單/收音機，我將如何做呢？

Answer 1

使用下拉菜單或單選按鈕的的onChange，事件和調用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); 
}