Développer un jeu avec Javascript et Canvas : The no tears way

[quentin01]

En même temps je voudrais pas dire mais ton code de test est faux. start est initialisé avant les deux dessins et tu ne le remet pas à la bonne date quand tu fais le deuxième test. Ce qui veut dire que le temps du test "optimisé" est le temps du test 1 et du test 2 réunit ... ( Or si la différence n'est que de peu de FPS c'est que le test2 est bel et bien optimisé ).

Code corrigé du test : ( La ligne rajouté est commenté )

function draw1(n)

{

	var canvas = document.getElementById('test-1');

	var img = document.getElementById('image');

	var w = canvas.width, h = canvas.height;

	var u = img.width, v = img.height;

	canvas.setAttribute('style', 'width:'+w+'px;height:'+h+'px;border:1px solid black;');

	var ctx = canvas.getContext('2d');

				

	var start = (new Date()).getTime();

	var k = 7, f = 0.9, Jmax=100;

	for (var j=0;j<Jmax;j++)

	{

		for (var i=0;i<n;i++)

		{

			ctx.drawImage(img, (i%k-1)*u*f, Math.floor(i/k-1)*v*f);

			ctx.drawImage(img, (i%k-0.5)*u*f, (Math.floor(i/k)-0.5)*v*f);

		}

	}

	var T = ( (new Date()).getTime() - start );

	document.getElementById('test-1-result').textContent = Math.floor(1000*Jmax/T) + ' Hz (' + Math.round(T/Jmax*1000) + ' µs)';

	

	var start = (new Date()).getTime(); // Cette fois on remet bien à zéro !

	var ctx2 = (document.getElementById('test-2')).getContext('2d');

	for (var j=0;j<Jmax;j++)

		ctx2.drawImage(canvas,0,0);

	var T = ( (new Date()).getTime() - start );

	document.getElementById('test-2-result').textContent = Math.floor(1000*Jmax/T) + ' Hz (' + Math.round(T/Jmax*1000) + ' µs)';

}