前端如何呼风唤雨

Canvas 等于什么？

= html5 =js = 取代flash = 你可以即见即所得向别人装逼！没错进入 canvas 的权力游戏吧！

起初我创造了canvas 。

我说,要有雨,就有了雨；

我说,要有雪,就有了雪。

而对于前端来说，canvas即是天地

在canvas这个天地上，前端可以呼风唤雨，无所不能。

------------------------------------华丽的分割线-------------------------------------------------

文章起因

其实就是最近在做一个需求，需要有下雨下雪的动画特效，故在这里做了一个drop的组件，来展现这种canvas常见的下落物体的效果。那么，=。= ，就让我们先看看效果吧。

[github地址] 之后贴出来哈。。。。

效果展示

调用代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#canvas{width:100%;height: 100%;}</style>
</head>
<body><canvas id="canvas"></canvas><script src="canvasDrop.js"></script><script>canvasDrop.init({type: "rain",  // drop类型，有rain or snowspeed : [0.4,2.5], //速度范围size_range: [0.5,1.5],//大小半径范围hasBounce: true, //是否有反弹效果or false,wind_direction: -105 //角度hasGravity: true //是否有重力考虑});</script>
</body>
</html>

下雨下雪

看起来效果还是不错的，相对于使用创建dom元素来制作多物体位移动画，使用canvas会更加容易快捷，以及性能会更好

源码讲解

好了，接下来讲解一下简单的实现原理首先，先定义一些我们会用到的全局变量，如风向角度，几率，对象数据等

定义全局变量


//定义两个对象数据
//分别是drops下落物体对象
//和反弹物体bounces对象
var drops = [], bounces = [];
//这里设定重力加速度为0.2/一帧
var gravity = 0.2;var speed_x_x, //横向加速度speed_x_y, //纵向加速度wind_anger;  //风向
//画布的像素宽高
var canvasWidth,canvasHeight;
//创建drop的几率
var drop_chance;
//配置对象
var OPTS;
//判断是否有requestAnimationFrame方法，如果有则使用，没有则大约一秒30帧
window.requestAnimFrame =window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 30);};

定义核心对象

接下来我们需要定义几个重要的对象该组织所需定义的对象也比较少，总共才三个在整个drop组件中共定义了`三个核心对象，分别是如下：

Vector 速度对象，带有横向x,和纵向y的速度大小单位为：V = 位移像素/帧

对于Vector对象的理解也十分简单粗暴，就是记录下落对象drop的速度/V


var Vector = function(x, y) {//私有属性  横向速度x ,纵向速度ythis.x = x || 0;this.y = y || 0;
};
//公有方法- add : 速度改变函数,根据参数对速度进行增加
//由于业务需求，考虑的都是下落加速的情况，故没有减速的，后期可拓展
/*
* @param v  object || string
*/
Vector.prototype.add = function(v) {if (v.x != null && v.y != null) {this.x += v.x;this.y += v.y;} else {this.x += v;this.y += v;}return this;
};
//公有方法- copy : 复制一个vector，来用作保存之前速度节点的记录
Vector.prototype.copy = function() {//返回一个同等速度属性的Vector实例return new Vector(this.x, this.y);
};

Drop 下落物体对象，即上面效果中的雨滴和雪，在后面你也可自己拓展为陨石或者炮弹

对于Drop对象其基本定义如下

//构造函数
var Drop = function() {/* .... */
};
//公有方法-update
Drop.prototype.update = function() {/* .... */
};
//公有方法-draw
Drop.prototype.draw = function() {/* .... */
};

看了上面的三个方法，是否都猜到他们的作用呢，接下来让我们了解这三个方法做了些什么

构造函数

构造函数主要负责定义drop对象的初始信息，如速度，初始坐标，大小，加速度等

//构造函数 Dropvar Drop = function() {//随机设置drop的初始坐标 //首先随机选择下落对象是从从哪一边var randomEdge = Math.random()*2;if(randomEdge > 1){this.pos = new Vector(50 + Math.random() * canvas.width, -80);}else{this.pos = new Vector(canvas.width, Math.random() * canvas.height);}//设置下落元素的大小//通过调用的OPTS函数的半径范围进行随机取值this.radius = (OPTS.size_range[0] + Math.random() * OPTS.size_range[1]) *DPR;//获得drop初始速度//通过调用的OPTS函数的速度范围进行随机取值this.speed = (OPTS.speed[0] + Math.random() * OPTS.speed[1]) *DPR;this.prev = this.pos;//将角度乘以 0.017453293 （2PI/360）即可转换为弧度。var eachAnger =  0.017453293; //获得风向的角度wind_anger = OPTS.wind_direction * eachAnger;//获得横向加速度 speed_x =  this.speed * Math.cos(wind_anger);//获得纵向加速度speed_y = - this.speed * Math.sin(wind_anger);//绑定一个速度实例this.vel = new Vector(wind_x, wind_y);};

Drop对象的update方法

update方法负责，每一帧drop实例的属性的改变如位移的改变

Drop.prototype.update = function() {this.prev = this.pos.copy();//如果是有重力的情况，则纵向速度进行增加if (OPTS.hasGravity) {this.vel.y += gravity;}//this.pos.add(this.vel);
};

Drop对象的draw方法

draw方法负责，每一帧drop实例的绘画

Drop.prototype.draw = function() {ctx.beginPath();ctx.moveTo(this.pos.x, this.pos.y);
//目前只分为两种情况，一种是rain  即贝塞尔曲线if(OPTS.type =="rain"){ctx.moveTo(this.prev.x, this.prev.y);var ax = Math.abs(this.radius * Math.cos(wind_anger));var ay = Math.abs(this.radius * Math.sin(wind_anger));ctx.bezierCurveTo(this.pos.x + ax, this.pos.y + ay, this.prev.x + ax , this.prev.y + ay, this.pos.x, this.pos.y);ctx.stroke();//另一种是snow--即圆形     }else{ctx.moveTo(this.pos.x, this.pos.y);ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI*2);ctx.fill();}
};

bounce 下落落地反弹对象，即上面雨水反弹的水滴，你也可后期拓展为反弹的碎石片或者烟尘

定义的十分简单，这里就不做详细说明

var Bounce = function(x, y) {var dist = Math.random() * 7;var angle = Math.PI + Math.random() * Math.PI;this.pos = new Vector(x, y);this.radius =  0.2+ Math.random()*0.8;this.vel = new Vector(Math.cos(angle) * dist,Math.sin(angle) * dist);
};Bounce.prototype.update = function() {this.vel.y += gravity;this.vel.x *= 0.95;this.vel.y *= 0.95;this.pos.add(this.vel);
};Bounce.prototype.draw = function() {ctx.beginPath();ctx.arc(this.pos.x, this.pos.y, this.radius*DPR, 0, Math.PI * 2);ctx.fill();};

对外接口

update

即相当于整个canvas动画的开始函数

function update() {var d = new Date;//清理画图ctx.clearRect(0, 0, canvas.width, canvas.height);var i = drops.length;while (i--) {var drop = drops[i];drop.update();//如果drop实例下降到底部，则需要在drops数组中清楚该实例对象if (drop.pos.y >= canvas.height) {//如果需要回弹，则在bouncess数组中加入bounce实例if(OPTS.hasBounce){var n = Math.round(4 + Math.random() * 4);while (n--)bounces.push(new Bounce(drop.pos.x, canvas.height));}//如果drop实例下降到底部，则需要在drops数组中清楚该实例对象drops.splice(i, 1);}drop.draw();}//如果需要回弹if(OPTS.hasBounce){var i = bounces.length;while (i--) {var bounce = bounces[i];bounce.update();bounce.draw();if (bounce.pos.y > canvas.height) bounces.splice(i, 1);}}//每次产生的数量if(drops.length < OPTS.maxNum){if (Math.random() < drop_chance) {var i = 0,len = OPTS.numLevel;for(; i<len; i++){drops.push(new Drop());}}}//不断循环updaterequestAnimFrame(update);
}

init

init接口，初始化整个canvas画布的一切基础属性如获得屏幕的像素比，和设置画布的像素大小，和样式的设置

function init(opts) {OPTS = opts;canvas = document.getElementById(opts.id);ctx = canvas.getContext("2d");兼容高清屏幕，canvas画布像素也要相应改变DPR = window.devicePixelRatio;//canvas画板像素大小， 需兼容高清屏幕，故画板canvas长宽应该乘于DPRcanvasWidth = canvas.clientWidth * DPR;canvasHeight =canvas.clientHeight * DPR;//设置画板宽高canvas.width = canvasWidth;canvas.height = canvasHeight;drop_chance = 0.4;//设置样式setStyle();
}function setStyle(){if(OPTS.type =="rain"){ctx.lineWidth = 1 * DPR;ctx.strokeStyle = 'rgba(223,223,223,0.6)';ctx.fillStyle = 'rgba(223,223,223,0.6)';}else{ctx.lineWidth = 2 * DPR;ctx.strokeStyle = 'rgba(254,254,254,0.8)';ctx.fillStyle = 'rgba(254,254,254,0.8)';}
}

结束语

好了，一个简单的drop组件已经完成了，当然其存在着许多地方不够完善，经过本次drop组件的编写，对于canvas的动画实现，我相信在H5的场景中拥有着许多可发掘的地方。

最后说下不足的地方和后期的工作哈：

0、该组件目前对外接口不够多，可调节的范围并不是很多，抽象不是很彻底
1、 setStyle 设置基本样式
2、 Drop 和Bounce 对象的 update 和 draw 方法的自定义，让用户可以设立更多下落的速度和大小改变的形式和样式效果
3、应增加对动画的pause,加速和减速等操作的接口 - 有兴趣去原文查看地址：http://imweb.io/topic/55e32fd5771670e207a16bb9

入坑方式： 欢迎加入~！气氛热情，欢乐多，妹子多！

web前端聚集地，汇聚了全国顶尖的web前端热爱者，最新技术，最炫潮流，最靠谱的话题：
做好现在！技术只是为了改变生活！JS前端实用开发QQ群：147250970

扫描屏幕下方的二维码，可以关注我的前端公众号。听说妹子挺多的，及时更新一些前端解惑和段子

canvas 让你呼风唤雨，下雨下雪效果相关推荐

cesium，实现下雨下雪效果切换
honey们,一起来学习cesium天气效果吧^^ 本篇文章实现的是简单的HTML页面在线显示,用其他框架的改一下就可以啦 1.CDN引入 <script src='https://cdn.bo ...
20多行js实现canvas雪夜下雪效果
目录前言实现canvas雪夜下雪效果 1.设置canvas标签的id为cvs,设置背景颜色为黑色 2.设置body外边距为0 3.通过获取DOM元素获得画板 4.指定二维绘图 5.设置宽高填满页面 ...
canvas下雪效果(原生js)
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
canvas下雨打雷效果
canvas下雨打雷效果废话不多说,代码走起 *html部分* <!DOCTYPE html> <html lang="zh-CN"><head&g ...
js画布实现下雪效果
之前使用css实现了下雪效果,也对比了前端多种实现动画的方法(链接见文末) 下面使用js和canvas的方法配合requestAnimationFrame实现一个简单的下雪效果,代码十分精简. 代码 ...
CSS：模拟下雪效果动画制作教程
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
纯css模拟下雪效果
效果如其名,想必都见过下雪(可能南方人除外哈哈),但下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果. 1.前言由于公司产品的活动,需要模拟类似下雪 ...
android 简易涂鸦板,canvas实现的简易涂鸦板效果
用canvas实现的简易涂鸦板效果,用鼠标点击在画布上随意涂鸦涂鸦 *{ margin: 0; padding: 0; } #canvas1{ box-shadow: 0 5px 40px blac ...
Canvas实战---模仿GOOGLE浮动小球效果
看到基于Canvas动画的Google浮动小球效果,非常炫,决定自己尝试模仿着做一个. Demo:http://qs20199.github.io/SuspendingBall/ 这个Demo并不难, ...

canvas 让你呼风唤雨，下雨下雪效果