建立两个 canvas 标签，大小一致，一个正常显示，一个隐藏（缓存用的，不插入dom中），先将结果draw缓存用的canvas上下文中，因为游离canvas不会造成ui的渲染，所以它不会展现出来，再把缓存的内容整个裁剪再 draw 到正常显示用的 canvas 上，这样能优化不少。

其实已经体现在上述的代码中的，比如，创建 star 的代码中：

/* 设置单个star * @param id：id * @param x：x坐标 * @param y：y坐标 * @param useCache：是否使用缓存 * */ function Star(id, x, y, useCache) { this.id = id; this.x = x; this.y = y; this.useCacha = useCache; this.cacheCanvas = document.createElement("canvas"); this.cacheCtx = this.cacheCanvas.getContext("2d"); this.r = Math.floor(Math.random() * star_r) + 1; this.cacheCtx.width = 6 * this.r; this.cacheCtx.height = 6 * this.r; var alpha = ( Math.floor(Math.random() * 10) + 1) / star_alpha; this.color = "rgba(255,255,255," + alpha + ")"; if (useCache) { this.cache() } }

细心的同学可能就会发现

this.cacheCanvas = document.createElement("canvas"); this.cacheCtx = this.cacheCanvas.getContext("2d");