niave implementation of prerender for canvas, the first optimization discussed here: http://www.html5rocks.com/en/tutorials/canvas/performance/

This commit is contained in:
thatcher 2013-03-01 08:14:35 -05:00
parent 417a93d5ae
commit 2be165fa70
2 changed files with 36 additions and 8 deletions

View File

@ -1153,6 +1153,7 @@ function drawTiles( drawer, lastDrawn ){
function drawDebugInfo( drawer, tile, count, i ){ function drawDebugInfo( drawer, tile, count, i ){
if ( USE_CANVAS ) { if ( USE_CANVAS ) {
drawer.context.save();
drawer.context.lineWidth = 2; drawer.context.lineWidth = 2;
drawer.context.font = 'small-caps bold 13px ariel'; drawer.context.font = 'small-caps bold 13px ariel';
drawer.context.strokeStyle = drawer.debugGridColor; drawer.context.strokeStyle = drawer.debugGridColor;
@ -1205,6 +1206,7 @@ function drawDebugInfo( drawer, tile, count, i ){
tile.position.x + 10, tile.position.x + 10,
tile.position.y + 70 tile.position.y + 70
); );
drawer.context.restore();
} }
} }

View File

@ -1,5 +1,7 @@
(function( $ ){ (function( $ ){
var TILE_CACHE = {},
TILE_CACHE_STACK = [],
TILE_CACHE_MAX = 256;
/** /**
* @class * @class
* @param {Number} level The zoom level this tile belongs to. * @param {Number} level The zoom level this tile belongs to.
@ -140,7 +142,9 @@ $.Tile.prototype = {
drawCanvas: function( context ) { drawCanvas: function( context ) {
var position = this.position, var position = this.position,
size = this.size; size = this.size,
rendered,
canvas;
if ( !this.loaded || !this.image ) { if ( !this.loaded || !this.image ) {
$.console.warn( $.console.warn(
@ -151,9 +155,9 @@ $.Tile.prototype = {
} }
context.globalAlpha = this.opacity; context.globalAlpha = this.opacity;
context.save(); //context.save();
//if we are supposed to b rendering fully opaque rectangle, //if we are supposed to be rendering fully opaque rectangle,
//ie its done fading or fading is turned off, and if we are drawing //ie its done fading or fading is turned off, and if we are drawing
//an image with an alpha channel, then the only way //an image with an alpha channel, then the only way
//to avoid seeing the tile underneath is to clear the rectangle //to avoid seeing the tile underneath is to clear the rectangle
@ -169,9 +173,31 @@ $.Tile.prototype = {
} }
context.drawImage( this.image, position.x, position.y, size.x, size.y ); if( !TILE_CACHE[ this.image.src ] ){
canvas = document.createElement( 'canvas' );
canvas.width = this.image.width;
canvas.height = this.image.height;
rendered = canvas.getContext('2d');
rendered.drawImage( this.image, 0, 0 );
TILE_CACHE[ this.image.src ] = rendered;
}
context.restore(); rendered = TILE_CACHE[ this.image.src ];
//rendered.save();
context.drawImage(
rendered.canvas,
0,
0,
rendered.canvas.width,
rendered.canvas.height,
position.x,
position.y,
size.x,
size.y
);
//rendered.restore();
//context.restore();
}, },
/** /**