<!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;">
当前浏览器不支持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";//设置背景颜色
context.fillRect( 0, 0, canvas.width, canvas.height);
function hello(){
for( var i = 0; i < 200; i++){
//为了使这两百个星星状态有些差异
//所以大小，位置， 角度应该有些不同
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();
//这部分是进行状太的设置
cxt.fillStyle = "#fb3";
cxt.strokeStyle = "#fd5";
cxt.lineWidth = 3;
cxt.lineJoin = "round";
cxt.fill();
cxt.stroke();
}
</script>
</body>
</html>
在canvas画星的一秒间隔里画个一样的背景覆盖呗：
function clear(){
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
}
window.setInterval(clear,990);像这样。