[js高手之路]html5 canvas动画教程 - 下雪效果
利用canvas,实现一个下雪的效果,我们先预览下效果:
我们先分析下这个效果:
1,随机产生雪花
2,雪花的产生不是同时产生,而是有先后顺序的
3,雪花怎么表示
4,怎么源源不断的下雪
5,雪花有大有小
搞清楚上面几个问题之后,这个效果基本上就实现了,
首先,由于这个是全屏效果,我采用动态创建canvas,把整个浏览器的宽与高赋值给canvas
1 var Canvas = function (w, h) { 2 this.width = w; 3 this.height = h; 4 } 5 Canvas.prototype = { 6 init: function () { 7 var oC = document.createElement("canvas"); 8 oC.setAttribute('width', this.width); 9 oC.setAttribute('height', this.height); 10 oC.setAttribute('id', 'canvas'); 11 oC.style.backgroundColor = '#000'; 12 document.body.appendChild(oC); 13 } 14 } 15 var curWinWidth = window.innerWidth, 16 curWinHeight = window.innerHeight; 17 var oCanvas = new Canvas(curWinWidth, curWinHeight); 18 oCanvas.init();
调用oCanvas对象的init方法之后,就会在body的最后面追加一个canvas,id为canvas,宽、高与浏览器的宽、高相同,背景为黑色,晚上下雪的效果
接下来,有了舞台,演员该上场了,怎么产生雪花呢?这里把下雪相关的操作,封装成一个类,他的基本结构如下:
var Snow = function(){}
Snow.prototype = {
init : function(){},
draw : function( cxt ) {},
update : function(){}
}
这个类一共有三个方法( init, draw, update ).
init:初始化雪花的位置( x, y 坐标 )、速度、半径( 雪花的大小,在这里我们把雪花用半径不同的圆表示 )
function random(min, max) { return Math.random() * (max - min) + min; } init: function () { this.x = random(0, width); this.y = 0; this.r = random(1, 5); this.vy = random(3, 5); }
那么init 加上 这个random函数 就可以完成雪花的初始化
1,雪花出来的时候,一般是在屏幕的最上方出现的,所以雪花的y坐标都是0, 其次,雪花的x坐标是随机的,他的范围是从屏幕的左边到右边,那么就是 0 ~ width. 这个width就是canvas的宽度,也就是浏览器的宽度
2,雪花的半径r, 设置为1 ~ 5之间的任意值
3,雪花下降的速度设置为3 ~ 5之间的随机速度,这里我做的下雪是垂直方向往下飘,你可以拓展,考虑风力影响( 这个时候肯定有水平方向的速度 )
有了这些初始化的参数之后,我们完善draw方法,绘制雪花:
1 draw: function (cxt) { 2 cxt.beginPath(); 3 cxt.fillStyle = 'white'; 4 cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false); 5 cxt.fill(); 6 cxt.closePath(); 7 this.update(cxt); 8 },
参数cxt就是canvas的上下文,这个函数很简单,就是一个arc方法调用init中设置的值来画圆(雪花),在该方法的最后调用了一个update方法,他是干嘛的?他是更新雪花在垂直方向的速度
update: function (cxt) { if (this.y < height - this.r) { this.y += this.vy; } else { this.init(); } }
在update方法中,我们做了边界判断: 雪花往下飘落的时候,肯定会消失,消失之后怎么处理?没有到达边界怎么处理?
canvas的高度减去雪花的半径,这就是雪花要消失时候的边界,所以this.y < height - this.r 如果这个条件成立,那么说明雪花一直在飘着,我们就要把雪花的y方向的位置更新,雪花看起来(‘正在下雪’),当一个雪花快要消失的时候,我们再把他移动到初始的位置,这样看起来就是在圆圆不断的下雪,而不需要重新绘制雪花(如果这样做,肯定会影响性能,这个特效最后肯定会被卡死,这个小技巧很多类似的特效都会用到)。至此核心的流程已经搞定,接下来,我们就要大量的生成雪花了。
1 var snow = []; 2 for (var i = 0; i < 500; i++) { 3 setTimeout(function () { 4 var oSnow = new Snow(); 5 oSnow.init(); 6 snow.push(oSnow); 7 }, 10 * i); 8 }
生成500个雪花,不是同时生成的,然后把这些雪花保存到数组snow中.
然后,开启定时器,让雪花不断的飘落吧,
关于requestAnimationFrame的使用,可以参考我的这篇文章:[js高手之路] html5新增的定时器requestAnimationFrame实战进度条
1 (function move() { 2 oGc.clearRect(0, 0, width, height); 3 for (var i = 0; i < snow.length; i++) { 4 snow[i].draw(oGc); 5 } 6 requestAnimationFrame(move); 7 })();
完整的demo代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 5 <title>雪花效果 - by ghostwu</title> 6 <!-- <script src="lib.js"></script> --> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 body { 14 overflow: hidden; 15 } 16 </style> 17 </head> 18 19 <body> 20 <script> 21 window.onload = function () { 22 var Canvas = function (w, h) { 23 this.width = w; 24 this.height = h; 25 } 26 Canvas.prototype = { 27 init: function () { 28 var oC = document.createElement("canvas"); 29 oC.setAttribute('width', this.width); 30 oC.setAttribute('height', this.height); 31 oC.setAttribute('id', 'canvas'); 32 oC.style.backgroundColor = '#000'; 33 document.body.appendChild(oC); 34 } 35 } 36 var curWinWidth = window.innerWidth, 37 curWinHeight = window.innerHeight; 38 var oCanvas = new Canvas(curWinWidth, curWinHeight); 39 oCanvas.init(); 40 41 var oC = document.querySelector('#canvas'); 42 var width = oC.width, height = oC.height, oGc = oC.getContext('2d'); 43 44 function random(min, max) { 45 return Math.random() * (max - min) + min; 46 } 47 var Snow = function () { 48 49 } 50 Snow.prototype = { 51 init: function () { 52 this.x = random(0, width); 53 this.y = 0; 54 this.r = random(1, 5); 55 this.vy = random(3, 5); 56 }, 57 draw: function (cxt) { 58 cxt.beginPath(); 59 cxt.fillStyle = 'white'; 60 cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false); 61 cxt.fill(); 62 cxt.closePath(); 63 this.update(cxt); 64 }, 65 update: function (cxt) { 66 if (this.y < height - this.r) { 67 this.y += this.vy; 68 } else { 69 this.init(); 70 } 71 } 72 } 73 74 var snow = []; 75 for (var i = 0; i < 500; i++) { 76 setTimeout(function () { 77 var oSnow = new Snow(); 78 oSnow.init(); 79 snow.push(oSnow); 80 }, 10 * i); 81 } 82 83 (function move() { 84 oGc.clearRect(0, 0, width, height); 85 for (var i = 0; i < snow.length; i++) { 86 snow[i].draw(oGc); 87 } 88 requestAnimationFrame(move); 89 })(); 90 } 91 </script> 92 </body>