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

//构造函数 Drop

var 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动画的开始函数