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

2019-01-28 16:25:23于海丽
  •                 }                    this.useCache = useCache;   
  •                 if(useCache){                        this.cache();   
  •                 }                }  

     

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

    XML/HTML Code复制内容到剪贴板
    1. cache:function(){                        this.cacheCtx.save();   
    2.                     var j=0;                        this.cacheCtx.lineWidth = borderWidth;   
    3.                     for(var i=1;i<this.r;i+=borderWidth){                            this.cacheCtx.beginPath();   
    4.                         thisthis.cacheCtx.strokeStyle = this.color[j];                            this.cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI);   
    5.                         this.cacheCtx.stroke();                            j++;   
    6.                     }                        this.cacheCtx.restore();