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,加速和减速等操作的接口

来源：腾讯Web前端IMWeb社区
【作者：coverguo】