Tutoriales sobre el elemento Canvas

Aprende a hacer animaciones básicas usando Canvas, un elemento de HTML5.

Tutoriales sobre el elemento Canvas

Esta serie consta de 4 capítulos.

Nivel de dificultad: Aprendiz.

Has visto esta serie al 0 %

Recuerda que debes iniciar sesión para que puedas llevar un control de tu progreso.

Empezar serie

Episodios

Episodio 1 06:32

Modificar el espacio disponible del navegador

Vemos cómo manipular el elemento canvas usando Javascript, y cómo modificar su ancho y alto para que ocupen siempre todo el espacio disponible del navegador.
Así, a medida que avancemos, no habrá diferencia en usar nuestra app desde dispositivos de diferentes tamaños.


Episodio 2 03:38

Cargar imágenes

Antes de mostrar las imágenes debemos saber cómo cargarlas y cómo asociar una función al evento onload de cada imagen.


Episodio 3 03:55

Mostrar imágenes

Luego de haber cargado imágenes, procedemos a mostrarlas sobre nuestro canvas. Sin embargo, no podemos realizar trazos ni graficar sobre el canvas directamente, debemos hacerlo desde su contexto en 2D.


Episodio 4 10:40

Animaciones

Luego de haber visto cómo cargar y mostrar imágenes, el siguiente paso es mostrar una imagen tras otra para generar nuestra primera animación.


¿Nos ayudas a compartir?


Antes que te vayas

Inscríbete en nuestro curso gratuito de Laravel