如何用选择颜色填充画布？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用选择颜色填充画布？相关的知识，希望对你有一定的参考价值。
我正在尝试使用Dropbox中的某些颜色填充矩形画布。现在，我正在尝试用白色，红色，蓝色，绿色填充画布。单击“添加颜色”按钮时，使用所选颜色填充画布。单击“清除”按钮时，应重置/删除颜色。
到目前为止，我的html代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="colors.js" type="text/javascript" defer></script>
</head>
<body onload="setUp()">
<h1>Canvas colors</h1>
<p>What colors should fill?
<select>
<option value="white">White</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="button" id="addColor" name="button">Add Color</button>
<button type="button" id="clearColor" name="button">Clear Color</button>
</p>
<br>
<br>
<canvas id="myCanvas" height="300" width="300" style="border: 1px solid black"></canvas>
</body>
</html>
JS：
let canvas;
let ctx;
function setUp(){
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
let addColor = document.getElementById('addColor');
let clearColor = document.getElementById('clearColor');
myCanvas();
}
addColor.onclick = function() {
function myCanvas(){
ctx.fillStyle = ["white", "red", "blue", "green", "pink", "purple", "black", "orange"];
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
}
clearColor.onclick = function() {
function myCanvas(){
ctx.fillStyle = white;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
}
答案
你的JS代码是完全错误的。
这是一个有效的example
你的错误是你正在向addColor函数闭包中声明的元素（变量）clearColor和setUp添加事件处理程序。
在您的情况下，JS代码应如下所示：
function setUp(){
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
document.getElementById('addColor').onclick = function() {
ctx.fillStyle = document.getElementById('colorSelector').value;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
document.getElementById('clearColor').onclick = function() {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
}
以上是关于如何用选择颜色填充画布？的主要内容，如果未能解决你的问题，请参考以下文章