Curso-Tutorial HTML5 – Cargar una imagen en Canvas

enero 14, 2011 · By VideoTutoriales

Bienvenidos a VerTutoriales.com, en esta ocasión vamos a seguir con el curso de HTML 5, y siguiendo con el canvas, vamos a mostrar el código para ver como podemos cargar una imagen en el canvas, en siguientes tutoriales veremos como tratar esa imagen, girarla, modificarla, etc… pero vamos poco a poco, para empezar, vamos a cargarla. Veamos como:

Cargar una imagen en un canvas con HTML5

Para comenzar con este tutorial, vamos a explicar el metodo drawImage() y continuaremos como cargar imagenes en el objeto Image de Javascript. Pero comencemos con DrawImage()

drawImage(objeto_imagen, x, y):

Esta función recibe 3 parámetros, la primera es el objeto imagen que más adelante explicaremos como cargarlo, el segundo y tercer parámetro son las coordenadas donde colocar nuestra imagen dentro del lienzo del Canvas. Ahora vamos a ver el...

`Objeto Image de JavaScript:`

Para cargar una imagen, lo primero que debemos de cargar es un objeto imagen

var imagenCanvas = new Image();

A continuación le paso el recurso (la imagen en sí) que puede ser JPG, GIF y PNG, de la siguiente manera:

imagenCanvas.src = "http://www.forohtml5.com/forohtml5.jpg";

Y para finalizar cargamos en el contexto del Canvas, pero para ahorrarnos problemas de descarga en nuestro navegador, usaremos el evento onload de la imagen para no mostrar la imagen antes de haberla cargado de la siguiente manera:

imagenCanvas.onload = function() { contexto.drawImage(imagenCanvas, 30, 15); }

Aunando todo el ejemplo, veamos como quedaría el script completo:

<script type="text/javascript"> window.onload = function() { var PintaCanvas = document.getElementById('Canvas-HTML5');

// compruebo que pueda soportar el canvas
if(PintaCanvas && PintaCanvas.getContext) {
// inicializo para “dibujar” en 2D
var contexto = PintaCanvas.getContext(’2d’);

//cargo la imagen y lo asigno al canvas
var ImagenHTML5 = new Image();
ImagenHTML5.onload = function() {
contexto.drawImage(ImagenHTML5, 30, 15);
}
ImagenHTML5 .src = “http://www.forohtml5.com/forohtml5.jpg”;

}
}
</script>

Con este script ya podriamos cargar una imagen de forma sencilla, luego solo faltaría cargarlo en el canvas, os dejo el código de ejemplo completo para que lo copieis y podais hacer pruebas en vuestro pc:

<html>
<head>
<title>Cargar imagen en un Canvas de HTML5</title>
<script type=”text/javascript”>
window.onload = function() {
var PintaCanvas = document.getElementById(‘Canvas-HTML5′);

// compruebo que pueda soportar el canvas
if(PintaCanvas && PintaCanvas.getContext) {
// inicializo para “dibujar” en 2D
var contexto = PintaCanvas.getContext(’2d’);

//cargo la imagen y lo asigno al canvas
var ImagenHTML5 = new Image();
ImagenHTML5.onload = function() {
contexto.drawImage(ImagenHTML5, 30, 15);
}
ImagenHTML5.src = “http://www.forohtml5.com/forohtml5.jpg”;
}
}
</script>
</head>
<body>
<canvas id=”Canvas-HTML5″ width=”200″ height=”200″>
<p>tu navegador no soporta canvas.</p>
</canvas>
</body>
</html>

Si habeis seguido el resto de tutoriales no tendreis problema en comprender este ejemplo, si no los habeis seguido, os recomiendo que comenceis por el primer tutorial sobre Canvas en HTML5, tambien os recomiendo que si teneis más interés sobre esta ampliación de html, visitad forohtml5.com.

Ya sabeis que para cualquier duda podeis comentarlo o visitar el foro que mencionamos antes.

Un saludo!

<canvas id="myDrawing" width="200" height="200">

<p>tu navegador no soporta canvas.</p>

</canvas>

Más video tutoriales para que aprendas...

Insertar al RSS los comentarios de esta entrada

Escribe tu comentario

« Crear una barra de progreso en HTML5

Cómo poner el número de página en Microsoft Word »