canvas下雪
2017-01-16 17:21
253 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zaki_wang/article/details/54575853
canvas下雪效果
html代码
<body> <button id="start-snowFall">开始</button> <button id="stop-snowFall">停止</button> <button id="pause-snowFall">暂停</button> <button id="resume-snowFall">回复</button> </body>
js代码
window.onload = function () { //绑定事件 var snow = new snowFall({ maxFlake: 200 }); var start = document.getElementById('start-snowFall'), stop = document.getElementById('stop-snowFall'), pause = document.getElementById('pause-snowFall'), resume = document.getElementById('resume-snowFall'); //开始 start.onclick = function () { snow.start(); } //停止 stop.onclick = function () { snow.stop(); } //暂停 pause.onclick = function () { snow.pause(); } //回复 resume.onclick = function () { snow.resume(); } } //控制对象封装 function snowFall(snow) { //可配置属性 snow = snow || {}; this.maxFlake = snow.maxFlake || 20; //最多骗术 this.flakeSize = snow.flakeSize || 10;// 雪花形状 this.fallSpeed = snow.fallSpeed || 2;//坠落速度 this.status = 0; //0-初始化、1-开始下雪 、2--停止下雪 、3--暂停下雪、4--继续下雨 } //兼容写法 requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { setTimeout(callback, 1000 / 60) }; cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame; //开始下雪 snowFall.prototype.start = function () { if (this.status == 1 || this.status == 4) return false; this.status = 1; //创建画布 snowCanvas.apply(this); //创建雪花形状 createFlakes.apply(this); //画学 drawSnow.apply(this); } //停止下雪 snowFall.prototype.stop = function () { if (this.status == 2 || this.status == 0 || !this.canvas) { return false; } //定制动画循环 this.pause(); this.status = 2; //删除画布 this.canvas.parentNode.removeChild(this.canvas); this.canvas = null; }; //暂停下雪 snowFall.prototype.pause = function () { if (this.status == 3) { return false; } this.status = 3; cancelAnimationFrame(this.loop); } //继续下雪 snowFall.prototype.resume = function () { if (this.status == 3 && this.canvas) { this.status = 4; //动画的计时控制 this.loop = requestAnimationFrame(function () { drawSnow.apply(that); }); } } //创建画布 function snowCanvas() { //添加Dom节点 var snowcanvas = document.createElement('canvas'); snowcanvas.id = 'snowfall'; snowcanvas.width = window.innerWidth; snowcanvas.height = window.innerHeight; snowcanvas.setAttribute('style', 'position:fixed;top:0;left:0;z-index:2999;pointer-events:none;'); document.getElementsByTagName('body')[0].appendChild(snowcanvas); this.canvas = snowcanvas; this.ctx = snowcanvas.getContext('2d'); //窗口大小改变处理 window.onresize = function () { snowcanvas.width = window.innerWidth; snowcanvas.height = window.innerHeight; } } //创建雪花 function createFlakes() { var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas; for (var i = 0; i < maxFlake; i++) { flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed)); } } //雪运动对象 function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) { this.x = Math.floor(Math.random() * canvasWidth); //x坐标 this.y = Math.floor(Math.random() * canvasHeight); //y坐标 this.size = Math.random() * flakeSize + 2; //形状 this.masSize = flakeSize; //最大形状 this.speed = Math.random() * 1 + fallSpeed; //坠落速度 this.fallSpeed = fallSpeed; //坠落速度 this.velY = this.speed; //y方向速度 this.velX = 0; //x方向速度 this.stepSize = Math.random() / 30; //步长 this.step = 0; //步数 } //重置当前雪花的位置 flakeMove.prototype.update = function () { var x = this.x, y = this.y; //左右摆动(余弦) this.velX *= 0.98; if (this.velY <= this.speed) { this.velY = this.speed; } this.velX += Math.cos(this.step += 0.05) * this.stepSize; this.y += this.velY; this.x += this.velX; //飞出边界处理 if (this.x >= canvas.width || this.x <= 0 || this.y >=canvas.height || this.y <= 0) { this.reset(canvas.width,canvas.height); } } //飞出边界--放置最顶端继续坠落 flakeMove.prototype.reset = function (width, height) { this.x = Math.floor(Math.random() * width); this.y = 0; this.size = Math.random() * this.masSize + 2; this.speed = Math.random() * 1 + this.fallSpeed; this.velY = this.speed; this.velX = 0; } //渲染雪花--随机形状 flakeMove.prototype.render = function (ctx) { var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size); snowFlake.addColorStop(0, 'rgba(255,255,255,0.9)'); snowFlake.addColorStop(0.5, 'rgba(255,255,255,0.5)'); snowFlake.addColorStop(1, 'rgba(255,255,255,0)'); ctx.save(); ctx.fillStyle = snowFlake; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } //滑雪 function drawSnow() { var maxFlake = this.maxFlake, flakes = this.flakes; ctx = this.ctx, canvas = this.canvas, that = this; //清空 ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < maxFlake; i++) { flakes[i].update(); flakes[i].render(ctx); } //一折一帧的画 this.loop = requestAnimationFrame(function () { drawSnow.apply(that); }); }
效果图
author:zaki
time:2017-01-17
相关文章推荐
- canvas 让你呼风唤雨,下雨下雪效果
- HTML5 canvas超简单和逼真的下雪特效
- canvas:下雪
- javascript canvas 实现下雪效果 圣诞节专用
- [js高手之路]html5 canvas动画教程 - 下雪效果
- HTML5 Canvas绘制的下雪效果
- 使用JavaScript和Canvas实现下雪动画效果
- 使用Canvas实现下雪功能
- canvas 让你呼风唤雨,下雨下雪效果
- canvas 让你呼风唤雨,下雨下雪效果
- canvas 让你呼风唤雨,下雨下雪效果
- html5 canvas动画教程 - 下雪效果
- JS+Canvas 实现下雨下雪效果
- canvas下雪效果
- 使用JavaScript和Canvas实现下雪动画效果
- HTML5: Canvas API
- canvas 绘圆加边框
- Canvas模拟太阳地球月球的运动过程
- 突袭HTML5之Canvas 2D入门5 - 事件与动画
- html5:<canvas>标签实现动态效果