* Render call to draw the panned entity
*
* @param {CanvasRenderingContext2D} context
*/
this.render = function(context) {
context.drawImage(
this.image,
this.x – this.width,
this.y – this.height);
context.drawImage(
this.image,
this.x,
this.y);
context.drawImage(
this.image,
this.x + this.width,
this.y + this.height);
}
};
清单 4中的对象存储实体的图像、x、y、宽度和高度的实例变量。这些对象遵循 JavaScript 语法，但为了简洁起见，仅提供了目标对象的不完整的伪代码。目前，渲染算法非常贪婪地在画布上渲染出它们的图像，完全不考虑游戏循环的其他任何要求。
为了提高性能，需要重点注意的是，panning渲染调用输出了一个比所需图像更大的图像。本文忽略这个特定的优化，但是，如果使用的空间比您的图像提供的空间小，那么请确保只渲染必要的补丁。
确定分层
现在您知道如何使用单一画布实现该示例，让我们看看有什么办法可以完善这种类型的场景，并加快渲染循环。要使用分层技术，则必须通过找出实体的渲染重叠，识别分层所需的 HTML5 画布元素。
重绘区域
为了确定是否存在重叠，要考虑一些被称为重绘区域的不可见区域。重绘区域是在绘制实体的图像时需要画布清除的区域。重绘区域对于渲染分析很重要，因为它们使您能够找到完善渲染场景的优化技术，如图 3所示。
图 3. 合成游戏视图与重绘区域
