滚动条

var ref = null;
var c = document.createElement('canvas');//添加一个canvas模块
c.width = 500;
c.height = 300;
c.id = "aaaaa";
var parent = document.getElementById("box");
parent.appendChild(c);//在名为 box 的div里添加刚才声明的canvas
var ctx = c.getContext('2d'),//ad模式
        hue = 0,
        vy = -3,//速度
        par = [],
        x = 0,
        draw = function () {
            var color;
            ctx.clearRect(0,0, c.width, c.height);
            x += 1.5;
            hue = (x > 500)?0:hue;
            color = 'hsla('+(hue++)+',100%,40%,1)';//渐变的颜色
            par.push({//小方块
                px : x + 40,
                py : 50,
                pvy : vy,
                pcolor : 'hsla('+(hue+10)+',100%,40%,1)'
            });
            x = ( x > 500) ? 0 : x;
            ctx.fillStyle = color;
            ctx.fillRect(45,40,x,20);

            var n = par.length;
            while(n--){
                par[n].pvy += (Math.random()+0.1)/5;
                par[n].py += par[n].pvy;
                if (par[n].py > c.height){
                    par.splice(n,1);
                    continue;
                }
                ctx.fillStyle = par[n].pcolor;
                ctx.fillRect(par[n].px,par[n].py,2,2);
                //ctx.fillStyle = '#222';
               // ctx.fillRect(45, 40, x, 10);
            }
            ref = window.requestAnimationFrame(draw);
        };
ref = window.requestAnimationFrame(draw);