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

                            ctx.stroke();   
                            j++;   
                        }   
                        ctx.restore();  

　　所以，我的方法很简单，每个圈圈对象里面给他一个离屏canvas作缓存区。

　　除了创建离屏canvas作为缓存之外，下面的代码中有一点很关键，就是要设置离屏canvas的宽度和高度，canvas生成后的默认大小是300X150；对于我的代码中每个缓存起来圈圈对象半径最大也就不超过80，所以300X150的大小明显会造成很多空白区域，会造成资源浪费，所以就要设置一下离屏canvas的宽度和高度，让它跟缓存起来的元素大小一致，这样也有利于提高动画性能。上面的四个demo很明显的显示出了性能差距，如果没有设置宽高，当页面超过400个圈圈对象时就会卡的不行了，而设置了宽高1000个圈圈对象也不觉得卡。

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

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;