我想把這個星星做成一閃一閃亮晶晶這樣的，但是我設(shè)置了計時器執(zhí)行，星星會不斷的重疊在一起，如何把原來的清楚呢？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>畫星星</title>
</head>
<body>
星星點燈
<canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px auto;">
當(dāng)前瀏覽器不支持canvas, 請更換瀏覽器后再試
</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.fillStyle = "black";//設(shè)置背景顏色
context.fillRect( 0, 0, canvas.width, canvas.height);
function hello(){
for( var i = 0; i < 200; i++){
//為了使這兩百個星星狀態(tài)有些差異
//所以大小，位置， 角度應(yīng)該有些不同
var r = Math.random() * 10 + 10;
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var a = Math.random() * 360;
drawStar( context, x, y, r, r/2.0, a);
}
}?
var t1 = window.setInterval(hello,1000);
}
?
/*
正玄sin cos
*/
function drawStar( cxt, x, y, outerR, innerR, rot ){
cxt.beginPath();
for( var i = 0; i < 5; i++){
cxt.lineTo(Math.cos( (18 + i*72 - rot)/180 * Math.PI) * outerR +x,
-Math.sin( (18 + i*72 - rot)/180 * Math.PI) * outerR + y);
cxt.lineTo(Math.cos( (54 + i*72 - rot)/180 * Math.PI) * innerR + x,
-Math.sin( (54 + i*72 - rot)/180 * Math.PI) * innerR + y);
}
cxt.closePath();
//這部分是進行狀太的設(shè)置
cxt.fillStyle = "#fb3";
cxt.strokeStyle = "#fd5";
cxt.lineWidth = 3;
cxt.lineJoin = "round";
cxt.fill();
cxt.stroke();
}
</script>
</body>
</html>
2015-03-07
在canvas畫星的一秒間隔里畫個一樣的背景覆蓋唄：
function?clear(){ ??context.fillStyle?=?"black"; ??context.fillRect(0,?0,?canvas.width,?canvas.height); } window.setInterval(clear,990);像這樣。