我想把这个星星做成一闪一闪亮晶晶这样的，但是我设置了计时器执行，星星会不断的重叠在一起，如何把原来的清楚呢？
小鱼儿被虾吃了
2015-03-07 15:37
<!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>
1回答
-
- lymo
- 2015-03-07 16:44:21
在canvas画星的一秒间隔里画个一样的背景覆盖呗：
function clear(){ context.fillStyle = "black"; context.fillRect(0, 0, canvas.width, canvas.height); } window.setInterval(clear,990);像这样。
Canvas绘图详解
72881 学习 · 422 问题
相似问题