Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Colocar mas de una imagen en Canvas

Estas en el tema de Colocar mas de una imagen en Canvas en el foro de Javascript en Foros del Web. Hola que tal gente ? Soy nuevo en el mundillo de javascript por lo tanto soy muy novato en esto y me surgio una duda ...
  #1 (permalink)  
Antiguo 10/11/2014, 14:35
 
Fecha de Ingreso: noviembre-2009
Mensajes: 3
Antigüedad: 14 años, 5 meses
Puntos: 0
Colocar mas de una imagen en Canvas

Hola que tal gente ? Soy nuevo en el mundillo de javascript por lo tanto soy muy novato en esto y me surgio una duda al hacer un ejercicio para la facultad en Canvas.

Estuve tratando de poner mas de una imagen con el metodo drawImage pero no lo pude lograr, segui los pasos de un tutorial de otra web (no se si puedo colocar links a sitios externos) en donde ahí mostraban que les salia bien el metodo pero yo al probar en mi PC y despues cuando lo abría en el navegador no me salia.

El codigo textual que copie de esa pagina, es este:

Código:
<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

</script>

</body>
</html>
En esa pagina les aparecia la imagen de The Scream dos veces, una dentro del area de canvas y otra fuera. En mi caso, solo aparece una vez fuera del canvas, pero nunca pude lograrlo que aparezca dentro, no se si algo estoy haciendo mal, la imagen la tengo descargada en el escritorio al igual que el html.

Saludos y gracias de antemano.
  #2 (permalink)  
Antiguo 10/11/2014, 15:05
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: Colocar mas de una imagen en Canvas

El código es correcto. Probalo en un servidor web y va a funcionar.
  #3 (permalink)  
Antiguo 10/11/2014, 15:28
Avatar de dAvidcA  
Fecha de Ingreso: septiembre-2009
Ubicación: /home/dev/
Mensajes: 73
Antigüedad: 14 años, 7 meses
Puntos: 7
Respuesta: Colocar mas de una imagen en Canvas

Hola kfontana06, como dice Panino5001 el código está correcto. Algunas de las funciones de javascript no funcionan o no se procesan correctamente si se abren desde un directorio local (file:///). Prueba en un servidor.
Acá pongo tu código y funciona correctamente:

http://jsfiddle.net/dAvidcA/s2nbfp8r/
  #4 (permalink)  
Antiguo 10/11/2014, 15:48
 
Fecha de Ingreso: noviembre-2009
Mensajes: 3
Antigüedad: 14 años, 5 meses
Puntos: 0
Respuesta: Colocar mas de una imagen en Canvas

Muchas gracias a los dos por la ayuda ! Saludos.

Etiquetas: canvas, html
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 17:25.