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

【问题标题】：How to change the color of a canvas using javascript?如何使用javascript更改画布的颜色？
【发布时间】：2015-04-18 15:48:32
【问题描述】：

我知道如何在 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();
}

【问题讨论】：

java != javascript，实际上语言是非常不同的。我已将您的 java 标签更改为 javascript，但在未来，您需要谨慎处理问题标签，以便您的问题能够吸引到正确的专家。

标签： javascript html loops canvas background-color

【解决方案1】：

在开始绘制圆圈之前，使用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++) {

...

【讨论】：

@GameAlchemist，这是一个刚接触画布的人提出的问题，答案很简单。为什么投反对票？
在这种情况下，您可能只使用 css 作为元素 (background-color:black)。除此之外，我看不到答案有任何错误，因此恕我直言，它不应该被否决。
嗨，我的png背景在旋转后是透明的我的图像的png角是黑色的如何透明？？