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

        if (!this.isDirty) {   
            return;   
        }   
    
        // Clear the calculated rectangle   
        context.clearRect(   
            this.left,   
            this.top,   
            this.right – this.left,   
            this.bottom – this.top);   
    
        // Reset base values   
        this.left   = canvas.width;   
        this.top    = canvas.height;   
        this.right  = 0;   
        this.bottom = 0;   
        this.isDirty = false;   
    }   
};  

将脏矩形算法集成到渲染循环，这要求在进行渲染调用之前调用清单 7中的管理器。将实体添加到管理器，使管理器可以在清除时计算清除矩形的维度。虽然管理器会产生预期的优化，但根据游戏循环，管理器能够针对游戏循环进行优化，如图 8所示。
图 8. 交互层的重绘区域

    帧 1 – 实体在碰撞，几乎重叠。
    帧 2 – 实体重绘区域是重叠的。
    帧 3 – 重绘区域重叠，并被收集到一个脏矩形中。
    帧 4 – 脏矩形被清除。

图 8显示了由针对在交互层的实体的算法计算出的重绘区域。因为游戏在这一层上包含交互，所以脏矩形策略足以解决交互和重叠的重绘区域问题。
作为清除的重写

对于在恒定重绘区域中动画的完全不透明实体，可以使用重写作为一项优化技术。将不透明的位图渲染为一个区域（默认的合成操作），这会将像素放在该区域中，不需要考虑该区域中的原始渲染。这个优化消除了渲染调用之前所需的清除调用，因为渲染会覆盖原来的区域。