gpt4 book ai didi

javascript - 用颜色填充方框 JavaScript

转载 作者:行者123 更新时间:2023-12-03 10:17:45 26 4
gpt4 key购买 nike

我有一个下拉列表,其中包含一些颜色的名称。然后我有一个函数可以填充我创建的框。我想将它们联系起来,当我从下拉列表中更改颜色,然后按绘制按钮时,填充框的颜色会相应地发生变化。我怎样才能做到这一点 ?谢谢。这是我的代码:

<!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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com