Tips——canvas闪屏问题的处理

var testBox = function(){
    var canvas = document.getElementById("cas"),
        ctx = canvas.getContext(‘2d‘),
        borderWidth = 2,
        Balls = [];
    var ball = function(x , y , vx , vy , useCache){
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.r = getZ(getRandom(20,40));
        this.color = [];
        this.cacheCanvas = document.createElement("canvas");
        this.cacheCtx = this.cacheCanvas.getContext("2d");
        this.cacheCanvas.width = 2*this.r;
        this.cacheCanvas.height = 2*this.r;
        var num = getZ(this.r/borderWidth);
        for(var j=0;j<num;j++){
            this.color.push("rgba("+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+","+getZ(getRandom(0,255))+",1)");
        }
        this.useCache = useCache;
        if(useCache){
            this.cache();
        }
    }

    function getZ(num){
        var rounded;
        rounded = (0.5 + num) | 0;
        // A double bitwise not.
        rounded = ~~ (0.5 + num);
        // Finally, a left bitwise shift.
        rounded = (0.5 + num) << 0;

        return rounded;
    }

    ball.prototype = {
        paint:function(ctx){
            if(!this.useCache){
                ctx.save();
                var j=0;
                ctx.lineWidth = borderWidth;
                for(var i=1;i<this.r;i+=borderWidth){
                    ctx.beginPath();
                    ctx.strokeStyle = this.color[j];
                    ctx.arc(this.x , this.y , i , 0 , 2*Math.PI);
                    ctx.stroke();
                    j++;
                }
                ctx.restore();
            } else{
                ctx.drawImage(this.cacheCanvas , this.x-this.r , this.y-this.r);
            }
        },

        cache:function(){
            this.cacheCtx.save();
            var j=0;
            this.cacheCtx.lineWidth = borderWidth;
            for(var i=1;i<this.r;i+=borderWidth){
                this.cacheCtx.beginPath();
                this.cacheCtx.strokeStyle = this.color[j];
                this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);
                this.cacheCtx.stroke();
                j++;
            }
            this.cacheCtx.restore();
        },

        move:function(){
            this.x += this.vx;
            this.y += this.vy;
            if(this.x>(canvas.width-this.r)||this.x<this.r){
                this.x=this.x<this.r?this.r:(canvas.width-this.r);
                this.vx = -this.vx;
            }
            if(this.y>(canvas.height-this.r)||this.y<this.r){
                this.y=this.y<this.r?this.r:(canvas.height-this.r);
                this.vy = -this.vy;
            }

            this.paint(ctx);
        }
    }

    var Game = {
        init:function(){
            for(var i=0;i<1000;i++){
                var b = new ball(getRandom(0,canvas.width) , getRandom(0,canvas.height) , getRandom(-10 , 10) ,  getRandom(-10 , 10) , true)
                Balls.push(b);
            }
        },

        update:function(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            for(var i=0;i<Balls.length;i++){
                Balls[i].move();
            }
        },

        loop:function(){
            var _this = this;
            this.update();
            RAF(function(){
                _this.loop();
            })
        },

        start:function(){
            this.init();
            this.loop();
        }
    }

    window.RAF = (function(){
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };
    })();

    return Game;
}();

function getRandom(a , b){
    return Math.random()*(b-a)+a;
}

window.onload = function(){
    testBox.start();
}