用颜色填充一个框JavaScript

我有一个有一些颜色名称的下拉列表。然后我有一个函数来填充我创建的框。我想将它们联系起来，当我从下拉列表中更改颜色时，然后按下绘图按钮，框中填充的颜色会相应地发生变化。我怎样才能做到这一点？谢谢。这里是我的代码：用颜色填充一个框JavaScript

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
     function drawBox() { 
      var c = document.getElementById("myCanvas"); 
      var ctx = c.getContext("2d"); 
      ctx.fillStyle = "#FF0000"; 
      ctx.fillRect(0,0,600,400); 
     } 
    </script> 
</head> 
<body> 
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #c3c3c3;"> 
</canvas> 

<FORM NAME="table"> 
    <select> 
     <option id=r value="Red">Red</option> 
     <option id=g value="Green">Green</option> 
     <option id=b value="Blue">Blue</option> 
    </select> 
    <input type=button value="Draw me a box" onClick="drawBox()"> 
</FORM> 
</body> 
</html>

来源

2015-04-22 Ching

使用'onchange'事件选择像这样的