如何使用下拉列表onchange事件将颜色放入画布的矩形中

Question

我一直在尝试使画布中的矩形出现并尝试使用与下拉菜单上的颜色相对应的颜色对其进行填充，但是我似乎无法绕开它，有什么建议吗？ （课程） 强文本

 window.onload = init; window.onload = myFunction; function init() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "white"; ctx.fillRect(20, 20, 10, 60); ctx.fillRect(70, 20, 10, 60); ctx.fillRect(120, 20, 10, 60); ctx.fillRect(170, 20, 10, 60); } function changeColor() { var eID = document.getElementById("colors"); var colorVal = eID.options[eID.selectedIndex].value; var colortxt = eID.options[eID.selectedIndex].text; document.getElementById('colorDiv').style.background = colortxt; }

 <html> <head> <div id="content "> <center> <canvas id="colorDiv " width="300 " height="300 " style="border:1px solid #c3c3c3; "> </canvas> <select id="colors " onchange="changeColor() "> <option value="1 ">Black</option> <option value="2 ">Brown</option> <option value="3 ">Red</option> <option value="4 ">orange</option> <option value="5 ">Yellow</option> <option value="6 ">Blue</option> <option value="7 ">Violet</option> <option value="8 " selected="selected ">Grey</option> </select> </div>

Answer 1

您在这里有多个处理程序：

window.onload = init;
window.onload = myFunction;

您的画布ID是colorDiv而不是mycanvas因为您在这里使用的是：

var c = document.getElementById("myCanvas");

Answer 2

在所有ID和值中，您都添加了一个空格。 采用

<select id="colors" onchange="changeColor()">

代替

<select id="colors " onchange="changeColor() ">

并在其他地方进行类似的更改。

这是一个有效的小提琴http://jsfiddle.net/p1bzeryt/4/

更新

按照@Ramanlfc的建议将选择器ID“ myCanvas”更改为colorDiv，并使用此功能

function fillColor(color) {
  var c = document.getElementById("colorDiv");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.fillRect(20, 20, 10, 60);
  ctx.fillRect(70, 20, 10, 60);
  ctx.fillRect(120, 20, 10, 60);
  ctx.fillRect(170, 20, 10, 60);
}

工作提琴： http : //jsfiddle.net/p1bzeryt/6/

您可以根据需要调用fillColor（“ white”）onload。

如何使用下拉列表onchange事件将颜色放入画布的矩形中

问题描述

2 个解决方案

解决方案1
1 2015-11-14 04:18:32

解决方案2
0 2015-11-14 04:37:12

如何使用下拉列表onchange事件将颜色放入画布的矩形中

问题描述

2 个解决方案

解决方案1 1 2015-11-14 04:18:32

解决方案2 0 2015-11-14 04:37:12

解决方案1
1 2015-11-14 04:18:32

解决方案2
0 2015-11-14 04:37:12