使用分层画布来优化HTML5渲染的教程

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

/**   
 * Render call   
 *   
 * @param {CanvasRenderingContext2D} context Canvas context   
 */   
function renderLoop(context)   
{   
    context.clearRect(0, 0, width, height);   
    background.render(context);   
    ground.render(context);   
    hills.render(context);   
    cloud.render(context);   
    player.render(context);   
}  

像清单 3中的代码一样，该解决方案会有一个render函数，每个游戏循环调用或每个更新间隔都会调用它。在本例中，渲染是从主循环调用和更新每个元素的位置的更新调用中抽象出来。

遵循 “清除到渲染” 解决方案，render会调用清除上下文，并通过调用屏幕上的实体各自的render函数来跟踪它。清单 3遵循一个程序化的路径，将元素放置到画布上。虽然该解决方案对于渲染屏幕上的实体是有效的，但它既没有描述所使用的所有渲染方法，也不支持任何形式的渲染优化。

为了更好地详细说明实体的渲染方法，需要使用两种类型的实体对象。清单 4显示了您将使用和细化的两个实体。
清单 4. 可渲染的Entity伪代码
 

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

var Entity = function() {   
    /**   
     Initialization and other methods   
     **/   
    
    /**   
      * Render call to draw the entity   
      *   
      * @param {CanvasRenderingContext2D} context   
      */   
    this.render = function(context) {   
        context.drawImage(this.image, this.x, this.y);   
    }   
};  

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

var PanningEntity = function() {   
    /**   
     Initialization and other methods   
     **/   
    
    /**