Vídeo Insertar Imagen en un Canvas HTML5
Una de las cosas nuevas que aparecen en HTML5 es el elemento Canvas. Hoy tenemos el vídeo insertar imagen en un Canvas HTML5 el cual nos cuenta cómo podemos crear un Canvas, para, de forma posterior, manipularlo mediante Javascript e insertar una imagen dentro.
Contenido del vídeo
Sección titulada «Contenido del vídeo»En este tutorial aprenderás:
- El elemento Canvas de HTML5 y cómo crearlo
- El método .getContext() para acceder al contexto del Canvas
- La clase Image() de Javascript para crear imágenes
- Cómo combinar todo para insertar una imagen en el Canvas
El elemento Canvas
Sección titulada «El elemento Canvas»El Canvas es un lienzo en blanco donde puedes dibujar gráficos mediante Javascript. Se crea con:
<canvas id="miCanvas" width="800" height="600"></canvas>El método getContext()
Sección titulada «El método getContext()»Para manipular el Canvas necesitamos obtener su contexto 2D:
var canvas = document.getElementById('miCanvas');var ctx = canvas.getContext('2d');La clase Image()
Sección titulada «La clase Image()»Para cargar imágenes en Javascript usamos:
var imagen = new Image();imagen.src = 'ruta/a/imagen.jpg';Insertar la imagen en el Canvas
Sección titulada «Insertar la imagen en el Canvas»Una vez cargada la imagen, la dibujamos en el Canvas:
imagen.onload = function() { ctx.drawImage(imagen, 0, 0);};El vídeo
Sección titulada «El vídeo»Pero lo mejor es que lo veas en el vídeo insertar imagen en un Canvas HTML5 y lo aprendas por ti mismo. Espero que os guste!
Puedes ver el vídeo directamente en YouTube: https://www.youtube.com/watch?v=kC3bmcaS6bw
El Canvas de HTML5 es una herramienta poderosa para crear gráficos dinámicos. Insertar imágenes es solo el principio de todo lo que puedes hacer con esta tecnología.