|
Цитата:
|
|
Таков будет мой ответ.)))
|
ну если говорить о производительности то часть нагрузки должно давать масштабирование на particle.spawnZ
sprite.draw( ctx, particle.spawnX, y, 0, 1/ particle.spawnZ, 1/ particle.spawnZ );
(маштабирование горизонталь + вертикаль )*каждую снежинку * каждый кадр = замедление.
без масштабирования у меня прирост производительности вдвое, нагрузка упала c 25% до 12-10%
Попробуйте замерить производительность (без масштабирования) у себя сами.
<head>
<style>
img, canvas { position: absolute; left: 0px; top: 0px; margin: 0px; padding: 0px; border: none; }
</style>
<script>
function byId ( id ) {
return document.getElementById( id );
}
function rand ( min, max ) {
return Math.random() * ( max - min ) + min;
}
function now () {
return ( +new Date() ) / 1000;
}
function Sprite ( image, sx, sy, sw, sh, originX, originY ) {
this.image = image;
this.sx = sx;
this.sy = sy;
this.sw = sw;
this.sh = sh;
this.originX = originX ? originX : 0;
this.originY = originY ? originY : 0;
}
Sprite.prototype.draw = function ( context, x, y, angle, scaleX, scaleY ) {
//context.save();
//context.translate( x, y );
//context.rotate( angle );
//context.scale( scaleX, scaleY );
/*context.drawImage(
this.image,
this.sx, this.sy,
this.sw, this.sh,
-this.originX,
-this.originY,
this.sw, this.sh
);*/
context.drawImage(this.image, x,y);
//context.restore();
}
function Flakes ( canvas, flake, zmin, zmax, count, speed, loopTime ) {
var viewW = canvas.width;
var viewH = canvas.height;
zmax = Math.min( zmax, ( loopTime * speed - flake.height ) / viewH );
zmin = Math.min( zmin, zmax );
var particles = [];
var flakeHalfW = flake.width * 0.5;
var flakeHalfH = flake.height * 0.5;
for ( var i = 0; i < count; i++ ) {
var spawnZ = rand( zmin, zmax );
particles.push({
spawnX : rand( -flakeHalfW / spawnZ, viewW + flakeHalfW / spawnZ ),
spawnZ : spawnZ,
spawnTime : rand( 0, loopTime ),
speed : speed / spawnZ,
halfH : flakeHalfH / spawnZ
});
}
particles.sort( function ( a, b ) {
return b.spawnZ - a.spawnZ;
});
this.particles = particles;
this.viewW = viewW;
this.viewH = viewH;
this.loopTime = loopTime;
this.ctx = canvas.getContext( '2d' );
this.sprite = new Sprite(
flake,
0, 0,
flake.width, flake.height,
flake.width * 0.5, flake.height * 0.5
);
}
Flakes.prototype.draw = function ( time ) {
var ctx = this.ctx;
var sprite = this.sprite;
var particles = this.particles;
var viewH = this.viewH;
var loopTime = this.loopTime;
//временный контекст
//var pCanvas = document.createElement('canvas');
//var pCtx = pCanvas.getContext('2d');
//pCanvas.width = 480;
//pCanvas.height = 384;
for ( var i = 0; i < particles.length; i++ ) {
var particle = particles[ i ];
var y = -particle.halfH + ( ( time + particle.spawnTime ) % loopTime ) * particle.speed;
if ( y < viewH + particle.halfH ) {
//sprite.draw( pCtx, particle.spawnX, y, 0, 1, 1 );
sprite.draw( ctx, particle.spawnX, y, 0, 1, 1 );
}
}
//ctx.drawImage(pCanvas, 0,0);
}
window.onload = function () {
var imgBg = byId( 'image-bg' );
var imgFlake = byId( 'image-flake' );
var canvas = byId( 'canvas' );
document.body.removeChild( imgFlake );
canvas.width = imgBg.width;
canvas.height = imgBg.height;
var ctx = canvas.getContext( '2d' );
var flakes = new Flakes( canvas, imgFlake, 2, 25, 1500, 400, 30 );
function render () {
ctx.clearRect( 0, 0, canvas.width, canvas.height );
flakes.draw( now() - timeOffset );
}
var animate = true;
var timeStop;
var timeOffset = 0;
var intervalId = window.setInterval( render, 40 );
canvas.onclick = function () {
if ( animate = !animate ) {
timeOffset += now() - timeStop;
intervalId = window.setInterval( render, 40 );
}
else {
timeStop = now();
window.clearInterval( intervalId );
}
}
}
</script>
</head>
<body>
<img id="image-flake" src="http://dl.dropbox.com/u/19390559/share/snowflake.png">
<img id="image-bg" src="http://dl.dropbox.com/u/19390559/share/christmas-tree.png">
<canvas id="canvas"></canvas>
</body>
В качестве решения
можно спрайты готовить заранее а не ресайзить в процессе рендеринга.
это конечно всё теории а пробывать лень. Мне кажется что большие снежинки отьедают выигрыш обратно, так как маленькие снежинки прорисовать быстрее, предварительно подготовленные спрайты могут дать представление истинном приросте)
UPD - из решения выпилено ещё часть манипуляций с канвасом