浅谈利用缓存来优化HTML5 Canvas程序的性能

        <div style="text-align:center">1000个圈圈对象也不卡</div>  
    </div>  
  
    <script>  
        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");   
                thisthis.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)");