我有一个下拉列表，其中包含一些颜色的名称。然后我有一个函数可以填充我创建的框。我想将它们联系起来，当我从下拉列表中更改颜色，然后按绘制按钮时，填充框的颜色会相应地发生变化。我怎样才能做到这一点 ？谢谢。这是我的代码:
<!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>
最佳答案
您始终可以将选项中的值更改为适当的 RGB 值，以便您可以在脚本中获取该值:
<select id="selectedColor">
<option id=r value="#FF0000">Red</option>
<option id=g value="#00FF00">Green</option>
<option id=b value="#0000FF">Blue</option>
</select>
您的脚本可以获取填充样式的颜色:
var e = document.getElementById("selectedColor");
ctx.fillStyle = e.options[e.selectedIndex].value
您仍然可以使用“红色”、“绿色”和“蓝色”等普通颜色词作为值，但使用 RGB 值可以让您以您已经习惯的方式选择所需的色调/设置使用。
关于javascript - 用颜色填充方框 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29788670/