Foros del Web » Diseño web » HTML »

mover imagen canvas 2d

Estas en el tema de mover imagen canvas 2d en el foro de HTML en Foros del Web. Hola es que tengo este code: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < body onload = "draw();" >           < canvas ...
  #1 (permalink)  
Antiguo 26/06/2012, 10:22
Avatar de gilber966  
Fecha de Ingreso: abril-2010
Mensajes: 117
Antigüedad: 4 años, 5 meses
Puntos: 4
mover imagen canvas 2d

Hola es que tengo este code:

Código HTML:
Ver original
  1. <body onload="draw();">
  2.  
  3.  
  4.  
  5.     <canvas id="tuto" width="1024" height="600">
  6.  
  7.         <img src="fondo.mision.1.png">
  8.  
  9.     </canvas>
  10.  
  11. <a href="#" onclick="init()">mover el carro</a>
  12.  
  13.   </body>
  14.  
  15.  
  16.  
  17. </html>

js:
Código Javascript:
Ver original
  1. var x=50,y=50;
  2.     var carro;
  3.     var ctx;
  4.      function carga() {
  5.  
  6.     var ctx = document.getElementById('tuto').getContext('2d');
  7.    
  8. var imagenes = new Array("carro.amigo.1.png","puente1.png","olas.gif");
  9. var lista_imagenes = new Array();
  10. }
  11.  
  12. function draw(){
  13.     carga();
  14.     var ctx = document.getElementById('tuto').getContext('2d');
  15.    
  16.    
  17.     ctx.fillStyle = "rgba(0, 0, 200, 0.2)";
  18.     ctx.fillRect (920, 0, 55, 30);
  19.     ctx.fillRect (920, 35, 55, 30);
  20.     ctx.fillRect (920, 70, 55, 30);
  21.    
  22.     var puente = new Image();
  23.     puente.src = 'puente.1.png';
  24.     puente.onload = function(){
  25.     //alert("cargo imagen puente");
  26.        ctx.drawImage(puente, 250, 240);
  27.     }
  28.    
  29.  
  30.    var carro = new Image();
  31.     carro.src = 'carro.amigo.1.png';
  32.     carro.onload = function(){
  33.    alert("cargo carro");
  34.    ctx.drawImage(carro, 50, 240);
  35.    
  36.   // }
  37.   // var olas = new Image();olas.src = 'olas.gif';olas.onload = function(){
  38.    //alert("cargo imagen puente");
  39.    //ctx.drawImage(olas, 100, 105);
  40. //}
  41.  
  42.     }
  43.   }
  44. var x=50,y=240;
  45.  
  46. function init(){
  47. alert("llego a init");
  48.  
  49.  corre=setInterval("run()",50);
  50. }
  51.  
  52. function run(){
  53. //alert("run");
  54.  x=x+10;
  55.  if(x>1024){
  56.   x=0;
  57.  ctx.drawImage(carro, x, 240);//aqui deberia mover el carrito
  58.  }
  59.  
  60. }

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..
  #2 (permalink)  
Antiguo 29/06/2012, 13:01
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.121
Antigüedad: 6 años, 1 mes
Puntos: 1526
Respuesta: mover imagen canvas 2d

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
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
maycolalvarez.com

Última edición por maycolalvarez; 29/06/2012 a las 13:09
  #3 (permalink)  
Antiguo 03/07/2012, 09:26
Avatar de gilber966  
Fecha de Ingreso: abril-2010
Mensajes: 117
Antigüedad: 4 años, 5 meses
Puntos: 4
Respuesta: mover imagen canvas 2d

Gracias, lo analizare aunq la verdad no te entendi bien.
  #4 (permalink)  
Antiguo 04/07/2012, 14:00
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.121
Antigüedad: 6 años, 1 mes
Puntos: 1526
Respuesta: mover imagen canvas 2d

entonces consulte sobre los términos de scope, closoure y javascript OO (orientado a objetos)
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
maycolalvarez.com
  #5 (permalink)  
Antiguo 04/07/2012, 16:44
Avatar de gilber966  
Fecha de Ingreso: abril-2010
Mensajes: 117
Antigüedad: 4 años, 5 meses
Puntos: 4
Respuesta: mover imagen canvas 2d

Cita:
Iniciado por maycolalvarez Ver Mensaje
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

Etiquetas: canvas, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:47.
SEO by vBSEO 3.3.2