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

问题描述：

我知道如何在CSS中轻松完成此操作，但我想知道如何使用Javascript制作默认的白色画布黑色。我在背景上获得了我想要的圈子总数，但是我为改变背景颜色所做的每一次尝试都摆脱了我的圈子。如何使用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>

的Java：

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'，而事实上的语言**非常不一样。我已将[tag：java]标签更改为[tag：javascript]，但将来您需要小心使用问题标签，以便您的问题吸引正确的专家。 – 2015-02-17 20:06:46

答

在开始绘制圆之前，用黑色填充使用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，这是来自一个新的画布的问题，它有一个简单的答案。为什么downvote？ – markE 2015-02-17 21:29:26

在这种情况下（'background-color：black'），你可以使用css作为元素。除此之外，我不能看到答案的任何错误，所以它不应该已经downvoted恕我直言。 – K3N 2015-02-18 05:42:50

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

相关推荐