码迷,mamicode.com
首页 > 其他好文 > 详细

canvas雪花代码

时间:2014-12-24 13:15:05      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

<html>

<head><style type="text/css"> #canvas{background:#000;} </style> </head>

<body> <canvas id="canvas"></canvas></body>
<script type="text/javascript">
window.onload=function(){
var _canvas=document.getElementById(‘canvas‘),//获取canvas容器
_ctx=_canvas.getContext(‘2d‘),//获取canvas画布
_h=window.innerHeight,//高度为窗口高度
_w=window.innerWidth,//宽度为窗口宽度
_count=50,//雪花数量
_angle=0,//下落角度
_snow=[];//雪花容器
_canvas.height=_h;
_canvas.width=_w;

for(var i=0;i<_count;i++){
_snow.push({
x:Math.random()*_w,
y:Math.random()*_h,
r:Math.random()*9+1,
d:Math.random()*_count
});
}
function _draw(){
_ctx.clearRect(0,0,_w,_h);
_ctx.beginPath();
_ctx.fillStyle="rgba(255,255,255,0.8)";
for(var i=0;i<_count;i++){
var _s=_snow[i];
_ctx.moveTo(_s.x,_s.y);
_ctx.arc(_s.x,_s.y,_s.r,0,Math.PI*2,true);
}
_ctx.fill();
_update();
}

function _update(){
_angle+=0.1;
for(var i=0;i<_count;i++){
var _s=_snow[i];
_s.y+=Math.cos(_angle+_s.d)+1+_s.r/2;
_s.x+=Math.sin(_angle)*2;

if(_s.x>_w+10 || _s.x<-10 || _s.y>_h){
if(i%3>0){
_snow[i]={x:Math.random()*_w,y:-20,r:_s.r,d:_s.d};
}else{
if(Math.sin(_angle)>0){
_snow[i]= {x: -10, y: Math.random()*_h, r: _s.r, d: _s.d};
}else{
_snow[i]= {x:_w+10, y: Math.random()*_h, r: _s.r, d: _s.d};
}
}
}

}
}
setInterval(_draw,30);
}
</script>
</html>

canvas雪花代码

标签:

原文地址:http://www.cnblogs.com/anyaran/p/4182070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!