如何使用 javascript 更改 canvas 的颜色?
How to change the color of a canvas using javascript?
我知道如何在 CSS 中轻松地做到这一点,但我想知道如何使用 Javascript 将默认的白色 canvas 变为黑色。我在背景上得到了我想要的圆圈总数,但我每次尝试更改背景颜色都会摆脱我的圆圈。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Loops Homework</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script src="js/main.js"></script>
</body>
</html>
Javascript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
for(var i = 0; i < 10; i++) {
ctx.fillStyle="rgba(255,0,0,0.8)";
fillCircle(200,200,i*2);
fillCircle(150,200,i*2);
fillCircle(100,200,i*2);
fillCircle(0,200,i*2);
fillCircle(50,200,i*2);
fillCircle(250,200,i*2);
fillCircle(300,200,i*2);
fillCircle(350,200,i*2);
fillCircle(400,200,i*2);
fillCircle(450,200,i*2);
}
var width = window.innerWidth;
var height = 100;
function fillCircle(x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
在开始画圆圈之前,使用 fillRect
:
用黑色填充整个 canvas
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
// fill the entire canvas with black before drawing the circles
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
for(var i = 0; i < 10; i++) {
...
我知道如何在 CSS 中轻松地做到这一点,但我想知道如何使用 Javascript 将默认的白色 canvas 变为黑色。我在背景上得到了我想要的圆圈总数,但我每次尝试更改背景颜色都会摆脱我的圆圈。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Loops Homework</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script src="js/main.js"></script>
</body>
</html>
Javascript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
for(var i = 0; i < 10; i++) {
ctx.fillStyle="rgba(255,0,0,0.8)";
fillCircle(200,200,i*2);
fillCircle(150,200,i*2);
fillCircle(100,200,i*2);
fillCircle(0,200,i*2);
fillCircle(50,200,i*2);
fillCircle(250,200,i*2);
fillCircle(300,200,i*2);
fillCircle(350,200,i*2);
fillCircle(400,200,i*2);
fillCircle(450,200,i*2);
}
var width = window.innerWidth;
var height = 100;
function fillCircle(x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
在开始画圆圈之前,使用 fillRect
:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
// fill the entire canvas with black before drawing the circles
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
for(var i = 0; i < 10; i++) {
...