利用分层优化 HTML5 画布渲染

#viewport {
/**
* Position relative so that canvas elements
* inside of it will be relative to the parent
*/
position: relative;
}

#viewport canvas {
/**
* Position absolute provides canvases to be able
* to be layered on top of each other
* Be sure to remember a z-index!
*/
position: absolute;
}

canvas {
/**
* Set transparent to let any other canvases render through
*/
background-color: transparent;
}

/**
* 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);
}

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);
}
};

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

/**
* 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);
}
};

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

/**
* Render call to draw the panned entity
*
* @param {CanvasRenderingContext2D} context
*/
this.render = function(context) {
context.clearRect(
this.x,
this.y,
context.canvas.width,
this.height);
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);
}
};

var DirtyRectManager = function() {
// Set the left and top edge to the max possible
// (the canvas width) amd right and bottom to least-most

// Left and top will shrink as more entities are added
this.left = canvas.width;
this.top = canvas.height;

// Right and bottom will grow as more entities are added
this.right = 0;
this.bottom = 0;

// Dirty check to avoid clearing if no entities were added
this.isDirty = false;

// Other Initialization Code

/**
* Other utility methods
*/

/**
* Adds the dirty rect parameters and marks the area as dirty
*
* @param {number} x
* @param {number} y
* @param {number} width
* @param {number} height
*/
this.addDirtyRect = function(x, y, width, height) {
// Calculate out the rectangle edges
var left = x;
var right = x + width;
var top = y;
var bottom = y + height;

// Min of left and entity left
this.left = left < this.left ? left : this.left;
// Max of right and entity right
this.right = right > this.right ? right : this.right;
// Min of top and entity top
this.top = top < this.top ? top : this.top;
// Max of bottom and entity bottom
this.bottom = bottom > this.bottom ? bottom : this.bottom;

this.isDirty = true;
};

/**
* Clears the rectangle area if the manager is dirty
*
* @param {CanvasRenderingContext2D} context
*/
this.clearRect = function(context) {
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;
}
};