使用HTML5 canvas 制作雪花效果
在制作圣诞节活动时候要制作下雪的效果。这有2种方法：
一、使用js插件,比如基于jQurey的snow.min.js
二、使用Html5的绘图API canvas
第一种方法简便,要引入jq，对于小页面会有点浪费,因为要引入jq框架。第二种方法会出现兼容性问题,IE9以下的浏览器不支持或者部分支持HTML5,但制作简单方便，效果好。
一个简单的html5绘制雪花的示例如下:
html部分
<html>
<head><style type="text/css"> #canvas{background:#000;} </style> </head>
<body> <canvas id="canvas"></canvas></body>
</html>
js部分：
<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=30,//雪花数量
_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>
