mover imagen canvas 2d

gilber966 · #1 (**permalink**) 26/06/2012, 10:22

Hola es que tengo este code:

Código HTML:

Ver original<body onload="draw();">
 
 
 
    <canvas id="tuto" width="1024" height="600">
 
        <img src="fondo.mision.1.png">
 
    </canvas>
 
<a href="#" onclick="init()">mover el carro</a>
 
  </body>
 
 
 
</html>

js:

Código Javascript:

Ver originalvar x=50,y=50;
    var carro;
    var ctx;
     function carga() {
 
    var ctx = document.getElementById('tuto').getContext('2d');
    
var imagenes = new Array("carro.amigo.1.png","puente1.png","olas.gif"); 
var lista_imagenes = new Array(); 
}
 
function draw(){
    carga();
    var ctx = document.getElementById('tuto').getContext('2d');
    
    
    ctx.fillStyle = "rgba(0, 0, 200, 0.2)";
    ctx.fillRect (920, 0, 55, 30);
    ctx.fillRect (920, 35, 55, 30);
    ctx.fillRect (920, 70, 55, 30);
    
    var puente = new Image();
    puente.src = 'puente.1.png';
    puente.onload = function(){
    //alert("cargo imagen puente");
       ctx.drawImage(puente, 250, 240);
    } 
    
  
   var carro = new Image();
    carro.src = 'carro.amigo.1.png';
    carro.onload = function(){
   alert("cargo carro");
   ctx.drawImage(carro, 50, 240);
   
  // }
  // var olas = new Image();olas.src = 'olas.gif';olas.onload = function(){
   //alert("cargo imagen puente");
   //ctx.drawImage(olas, 100, 105);
//}
  
    }
  }
var x=50,y=240;
 
function init(){
alert("llego a init");
 
 corre=setInterval("run()",50);
}
 
function run(){
//alert("run");
 x=x+10;
 if(x>1024){
  x=0;
 ctx.drawImage(carro, x, 240);//aqui deberia mover el carrito
 }
 
}

pueden verlo funcionando aqui

para mover el carro se hace click en el link.

Gracias si alguien puede ayudarme, estoy iniciando el manejo del canvas..

o si saben de un framework con doc en español. ps el ingles regular, regular..

maycolalvarez · #2 (**permalink**) 29/06/2012, 13:01

mmm, interesante, pero creo que en el foro de javascript te pueden ayudar mejor, puedes reportarlo para que lo muevan

lo que puedo ver es que tratas de colocar la instancia del contexto en una variable global ctx, más sin embargo desde la función carga() re-defines la misma variable:

var ctx; //contexto global (global scope, window.ctx)
function carga() {
var ctx = ... //dentro de la función

por eso el contexto nunca llega a la variable global, porque la has re-definido dentro de la función y ya no pertenece al scope global , si la defines como global, dentro de las funciones no debes usar var a no ser que la variable sea propia de dicha función.

veo que se presenta el problema con otras variables, por lo que tendrás que resolverlo y probar para descartar que no sea otra cosa como los closures

gilber966 · #3 (**permalink**) 03/07/2012, 09:26

Gracias, lo analizare aunq la verdad no te entendi bien.

maycolalvarez · #4 (**permalink**) 04/07/2012, 14:00

entonces consulte sobre los términos de scope, closoure y javascript OO (orientado a objetos)

gilber966 · #5 (**permalink**) 04/07/2012, 16:44

Cita:

Iniciado por maycolalvarez

entonces consulte sobre los términos de scope, closoure y javascript OO (orientado a objetos)

Gracias ya lo hize funcionar aqui

ahora otra dudiya, puedo colocarle gifs animados