General | Javier Vicente

Hoy me ha dado por probar de hacer una animación muy sencilla en html5 y la misma en flash para comparar.

Aquí tenemos una animación simple echa en flash.

This movie requires Flash Player 9

addEventListener(Event.ENTER_FRAME,onFrame);
function onFrame(e:Event):void{
	if(cuadrado.x >=210){
		cuadrado.x = 0 - cuadrado.width;
	}
	cuadrado.x +=3;
}

addEventListener(Event.ENTER_FRAME,onFrame);

function onFrame(e:Event):void{

if(cuadrado.x >=210){

cuadrado.x = 0 - cuadrado.width;

}

cuadrado.x +=3;

}

Y aquí tenemos el mismo ejemplo en html5, que opinan?

<html>
 <head>
 <title>Animacion cuadrado</title>
 <script>
 var cuadX = 0;
 var cuadY = 0;
 var cuadW = 50;
 var cuadH = 50;
 var cuadrado = new Image();
 var stage;
 
 window.onload = function(){
	 init();
 }
 
 function init(){
	 cuadrado.src = "cuadrado.jpg";
 }
	 
 cuadrado.onload = function() {
	stage = document.getElementById('Stage');
	stage = stage.getContext('2d');
		  stage.fillStyle = '#333333';
		  stage.drawImage(cuadrado, cuadX, cuadY, cuadW, cuadH);
		  setInterval(onFrame,16);
	 }
      
  function onFrame(){
		 if(cuadX >=210){
		  cuadX = 0 - cuadW;
		 }
		 limpiar();  
		 cuadX +=3;
		 stage.drawImage(cuadrado,cuadX,cuadY,cuadW, cuadH);
         }
   
  function limpiar(){
       stage.fillStyle = '#333333';
       stage.fillRect(0, 0, 210, 100);
  }
</script>
</head>
<body>
<canvas id="Stage" width="210" height="100">
Si ves esto en vez de la animacion <br>es porque tu navegador no soporta HTML5
Visualizalo con FireFox.
 </canvas>
</body>
</html>

<html>

<head>

<title>Animacion cuadrado</title>

var cuadX = 0;

var cuadY = 0;

var cuadW = 50;

var cuadH = 50;

var cuadrado = new Image();

var stage;

window.onload = function(){

init();

}

function init(){

cuadrado.src = "cuadrado.jpg";

}

cuadrado.onload = function() {

stage = document.getElementById('Stage');

stage = stage.getContext('2d');

stage.fillStyle = '#333333';

stage.drawImage(cuadrado, cuadX, cuadY, cuadW, cuadH);

setInterval(onFrame,16);

}

function onFrame(){

if(cuadX >=210){

cuadX = 0 - cuadW;

}

limpiar();

cuadX +=3;

stage.drawImage(cuadrado,cuadX,cuadY,cuadW, cuadH);

}

function limpiar(){

stage.fillStyle = '#333333';

stage.fillRect(0, 0, 210, 100);

}

</script>

</head>

<body>

Si ves esto en vez de la animacion <br>es porque tu navegador no soporta HTML5

Visualizalo con FireFox.

</canvas>

</body>

</html>