单一实体清除
第一个优化方法针对的是清除空间，通过只清除组成该实体的屏幕子集来加快处理。首先减少与区域的各实体周围的透明像素重叠的重绘区域量。使用此技术的包括相对较小的实体，它们填充了视区的小区域。
第一个目标是球和障碍物实体。单一实体清除技术涉及到在将实体渲染到新位置之前清除前一帧渲染该实体的位置。我们会引入一个清除步骤到每个实体的渲染，并存储实体的图像的边界框。添加该步骤会修改实体对象，以包括清除步骤，如清单 5所示。
清单 5. 包含单框清除的实体
XML/HTML Code复制内容到剪贴板
var Entity = function() {
/**
Initialization and other methods
**/
/**
* Render call to draw the entity
*
* @param {CanvasRenderingContext2D} context
*/
this.render = function(context) {
context.clearRect(
this.prevX,
this.prevY,
this.width,
this.height);
context.drawImage(this.image, this.x, this.y);
thisthis.prevX = this.x;
thisthis.prevY = this.y;
}
};
render函数的更新引入了一个常规drawImage之前发生的clearRect调用。对于该步骤，对象需要存储前一个位置。图 6显示了对象针对前一个位置所采取的步骤。
图 6. 清除矩形
您可以为每个实体创建一个在更新步骤前被调用的clear方法，实现此渲染解决方案（但本文将不会使用clear方法）。您还可以将这个清除策略引入到PanningEntity，在地面和云实体上添加清除，如清单 6所示。
清单 6. 包含单框清除的PanningEntity
