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

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());

}

//不断循环update

requestAnimFrame(update);

}</i></i>

复制代码

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

function init(opts) {

OPTS = opts;

canvas = document.getElementById(opts.id);

ctx = canvas.getContext("2d");

////兼容高清屏幕，canvas画布像素也要相应改变

DPR = window.devicePixelRatio;

//canvas画板像素大小，需兼容高清屏幕，故画板canvas长宽应该乘于DPR

canvasWidth = 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,加速和减速等操作的接口
本文首发IMWeb，如转载，敬请注明地址。
原创地址：
腾讯Web前端IMWeb社区

【作者：coverguo】
【文章为作者原创，转载请注明作者及来源出处】

本主题由 html5cn 于 6 天前设置高亮