【canvas教程】前端如何呼风唤雨_H5之家 - 中国HTML5教程资源分享第一站

创世纪第一章
首卷原文
起初我创造了canvas 。
我说,要有雨,就有了雨；
我说,要有雪,就有了雪。
而对于前端来说，canvas即是天地
在canvas这个天地上，前端可以呼风唤雨，无所不能。

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

##文章起因
其实就是最近在做一个需求，需要有下雨下雪的动画特效，故在这里做了一个drop的组件，来展现这种canvas常见的下落物体的效果。那么，=。= ，就让我们先看看效果吧。
[github地址] 之后贴出来哈。。。。

##效果展示
调用代码

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#canvas{

width:100%;

height: 100%;

}

</style>

</head>

<body>

canvasDrop.init({

type: "rain", // drop类型，有rain or snow

speed : [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 ,纵向速度y

this.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对象的初始信息，如速度，初始坐标，大小，加速度等