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

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

 

当我实例化圈圈对象时，直接调用缓存方法，把复杂的圈圈直接画到圈圈对象的离屏canvas中保存起来。

XML/HTML Code复制内容到剪贴板

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