如何使用javascript更改画布的颜色？_Javascript_Html_Loops_Canvas_Background Color

如何使用javascript更改画布的颜色？

javascript html loops canvas

如何使用javascript更改画布的颜色？,javascript,html,loops,canvas,background-color,Javascript,Html,Loops,Canvas,Background Color,我知道如何在CSS中轻松实现这一点，但我想知道如何使用Javascript将默认的白色画布变为黑色。我得到了我想要放在背景上的圆圈总数，但是我每次尝试改变背景颜色都会去掉我的圆圈 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Loops Homework</title> </head&g

我知道如何在CSS中轻松实现这一点，但我想知道如何使用Javascript将默认的白色画布变为黑色。我得到了我想要放在背景上的圆圈总数，但是我每次尝试改变背景颜色都会去掉我的圆圈

<!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();
}

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（'2d'）；
对于（变量i=0；i<10；i++）{
ctx.fillStyle=“rgba（255,0,0.8）”；
圆角圆（200200，i*2）；
圆角圆（150200，i*2）；
圆角（100200，i*2）；
圆角圆（0200，i*2）；
圆角（50200，i*2）；
圆角圆（250200，i*2）；
圆角圆（300200，i*2）；
圆角圆（350200，i*2）；
圆角圆（400200，i*2）；
圆角（450200，i*2）；
}
变量宽度=window.innerWidth；
var高度=100；
函数圆角圆（x、y、半径）{
ctx.beginPath（）；
ctx.弧（x，y，半径，0，数学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++) {

...

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（'2d'）；
//在绘制圆之前，用黑色填充整个画布
ctx.fillStyle='black'；
ctx.fillRect（0,0，canvas.width，canvas.height）；
对于（变量i=0；i<10；i++）{
...

开始绘制圆之前，请使用

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++) {

...

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（'2d'）；
//在绘制圆之前，用黑色填充整个画布
ctx.fillStyle='black'；
ctx.fillRect（0,0，canvas.width，canvas.height）；
对于（变量i=0；i<10；i++）{
...

java！=javascript

，事实上语言非常不同。我已经将您的标记更改为，但在将来，您需要小心使用您的问题标记，以便您的问题吸引正确的专家。

java！=javascript

，事实上语言非常不同。我已经将您的标记更改为，但在在未来，你要小心你的问题标签，这样你的问题才能吸引到正确的专家。@gamealchest，这是一个来自画布新手的问题，答案很简单。为什么要投反对票？在这种情况下，你可能只需对元素使用css（

背景色：黑色

）。除此之外，我看不出答案有任何错误，因此不应该被否决。嗨，旋转图像的png角后，我的png背景是透明的。我的图像的png角是黑色的。如何透明？？？@GameAlchemist，这是一个来自画布新手的问题，答案很简单。为什么否决？你可能只需要使用css对于本例中的元素（

背景色：黑色

）。除此之外，我看不到答案有任何错误，因此不应该对其进行降级IMHO.hi，旋转图像的png角后，我的png背景是透明的。我的图像的png角是黑色，如何透明？？