利用canvas，实现一个下雪的效果，我们先预览下效果：
我们先分析下这个效果：
1，随机产生雪花
2，雪花的产生不是同时产生，而是有先后顺序的
3，雪花怎么表示
立即学习“前端免费学习笔记（深入）”；
4，怎么源源不断的下雪
5，雪花有大有小
搞清楚上面几个问题之后，这个效果基本上就实现了，
首先，由于这个是全屏效果，我采用动态创建canvas，把整个浏览器的宽与高赋值给canvas
var Canvas = function (w, h) { this.width = w; this.height = h; } Canvas.prototype = { init: function () { var oC = document.createElement("canvas"); oC.setAttribute('width', this.width); oC.setAttribute('height', this.height); oC.setAttribute('id', 'canvas'); oC.style.backgroundColor = '#000'; document.body.appendChild(oC); } } var curWinWidth = window.innerWidth, curWinHeight = window.innerHeight; var oCanvas = new Canvas(curWinWidth, curWinHeight); 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方法，绘制雪花：
draw: function (cxt) { cxt.beginPath(); cxt.fillStyle = 'white'; cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false); cxt.fill(); cxt.closePath(); this.update(cxt); },
参数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
var snow = []; for (var i = 0; i < 500; i++) { setTimeout(function () { var oSnow = new Snow(); oSnow.init(); snow.push(oSnow); }, 10 * i); }
生成500个雪花，不是同时生成的，然后把这些雪花保存到数组snow中.
然后，开启定时器，让雪花不断的飘落吧，
关于requestAnimationFrame的使用，可以参考我的这篇文章：[js高手之路] html5新增的定时器requestAnimationFrame实战进度条
(function move() { oGc.clearRect(0, 0, width, height); for (var i = 0; i < snow.length; i++) { snow[i].draw(oGc); } requestAnimationFrame(move); })();
完整的demo代码：
雪花效果 - by ghostwu * { margin: 0; padding: 0; } body { overflow: hidden; } window.onload = function () { var Canvas = function (w, h) { this.width = w; this.height = h; } Canvas.prototype = { init: function () { var oC = document.createElement("canvas"); oC.setAttribute('width', this.width); oC.setAttribute('height', this.height); oC.setAttribute('id', 'canvas'); oC.style.backgroundColor = '#000'; document.body.appendChild(oC); } } var curWinWidth = window.innerWidth, curWinHeight = window.innerHeight; var oCanvas = new Canvas(curWinWidth, curWinHeight); oCanvas.init(); var oC = document.querySelector('#canvas'); var width = oC.width, height = oC.height, oGc = oC.getContext('2d'); function random(min, max) { return Math.random() * (max - min) + min; } var Snow = function () { } Snow.prototype = { init: function () { this.x = random(0, width); this.y = 0; this.r = random(1, 5); this.vy = random(3, 5); }, draw: function (cxt) { cxt.beginPath(); cxt.fillStyle = 'white'; cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false); cxt.fill(); cxt.closePath(); this.update(cxt); }, update: function (cxt) { if (this.y < height - this.r) { this.y += this.vy; } else { this.init(); } } } var snow = []; for (var i = 0; i < 500; i++) { setTimeout(function () { var oSnow = new Snow(); oSnow.init(); snow.push(oSnow); }, 10 * i); } (function move() { oGc.clearRect(0, 0, width, height); for (var i = 0; i < snow.length; i++) { snow[i].draw(oGc); } requestAnimationFrame(move); })(); }
以上就是html5实现下雪效果的方法 的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545027.html
微信扫一扫 
支付宝扫一扫 
