Aprende Canvas HTML5
La poderosa herramienta para artistas, diseñadores y profesores en la web.
Language: spanish
Note: 4.2/5 (12 notes) 1,446 students
Instructor(s): Francisco Javier Arce Anguiano
Last update: 2022-04-29
What you’ll learn
- Aprenderá a manejar las principales formas como líneas, curvas bezier, arcos y rectángulos.
- Aprenderá a manejar los gradientes, textos y cargar imágenes en Canvas de HTML 5.
- Aprenderá a aplicar filtros y efectos a las imágenes con el canvas de HTML 5.
- Aplicará las transformaciones de trasladar, rotar, escalar y sesgar en el Canvas de HTML5.
- Aprenderá a manejar los diferentes eventos del ratón.
- Aprenderá la realización de animaciones con Canvas de HTML5
- Creará gráficas de pastel o pie, de barras y de líneas con el Canvas de HTML5.
Requirements
- Conocimientos generales de HTML5, CSS y JavaScript
Description
El canvas de HTML5 es una poderosa herramienta orientada a artistas, diseñadores, profesores y principiantes de programación que nos permitirá hacer tareas creativas y de animación que se ejecuta perfectamente en las páginas web. Esta basada en la enorme flexibilidad de JavaScript. Los objetivos de este curso son:
Aprenderá a manejar las principales formas como líneas, curvas bezier, arcos y rectángulos.
Aprenderá a manejar los gradientes, textos y cargar imágenes en Canvas de HTML 5.
Aprenderá a aplicar filtros y efectos a las imágenes con el canvas de HTML 5.
Aplicará las transformaciones de trasladar, rotar, escalar y sesgar en el Canvas de HTML5.
Aprenderá a manejar los diferentes eventos del ratón.
Aprenderá la realización de animaciones con Canvas de HTML 5.
Creará gráficas de pastel o pie, de barras y de líneas con el Canvas de HTML5.
Este curso esta dirigido a diseñadores y desarrolladores web que deseen crear animaciones interactivas visibles en navegadores web. Necesitas tener conocimientos previos de JavaScript y de HTML. En el capítulo de manejo de imágenes necesitarás un servidor local o un servidor web para poder cargar recursos externos a nuestras páginas. En todo momento contarás con los archivos del curso y los apuntes de cada sección.
Who this course is for
- Desarrolladores y diseñadores web.
Course content
- Introducción a canvas de HTML5
- Bienvenida al curso Aprende Canvas HTML5 de cero a pro
- Antes de empezar el curso “Aprende Canvas HTML5, de cero a pro”
- Introducción al Canvas de HTML5
- Crear un rectángulo en Canvas
- Crear líneas en Canvas
- Propiedades de las líneas en canvas
- Estado en canvas save/restore
- Dibujar paths o trazos en Canvas
- Dibujar arcos en Canvas
- Dibujar curvas Bézier Cuadráticas
- Dibujar curvas Bézier Cúbicas
- Dibujar Líneas en zigzag
- Dibujar Líneas en espiral
- Dibujar una estrella
- Dibujar un engrane, primera parte
- Dibujar un engrane, segunda parte
- Crear un rectángulo con esquinas redondeadas utilizando cuevas bezier
- Apuntes a la sección 1
- Gradientes, textos e imágenes en Canvas de HTML5
- Crear gradientes lineales
- Las direcciones de los gradientes lineales
- Crear gradientes radiales
- Utilizar los patrones de diseño
- Introducción al Manejo de imágenes
- Aplicar un filtro a la imagen
- Manejo de texto en Canvas
- Manejo de eventos en Canvas
- Dibujar una flor con curvas bezier
- Dibujar una flor con mousedown
- Dibujar con el ratón
- Controles para los parámetros de dibujo
- Apuntes a la sección 2
- Manejo de imágenes con el Canvas de HTML5
- Cargar archivos de imágenes al canvas de HTML5
- Aplicar filtros a la imagen
- Hacer un flip de la imagen
- Aplicar filtro de color
- Modificar el canal alfa
- Recortar una imagen
- Pixelado de una imagen
- Manejo básico de Sprites con canvas
- Creando una animación tipo sprite con archivos de imágenes
- Animación con un sprite de anchos y alturas diferentes en el canvas
- Uso del teclado para coordinar las animaciones a base de sprites con el canvas
- Activar las animaciones por medio del teclado con archivos individuales (1era)
- Activar las animaciones por medio del teclado con archivos individuales (2da)
- Realizar un fondo deslizable (scrolling background)
- Juntar el personaje con el fondo deslizables en el canvas
- Optimizar las gráficas y la carga de imágenes con el canvas de HTML5
- Añadir objetos a la animación en Canvas de HTML5
- Activar el “salto” del personaje en Canvas de HTML5
- Apuntes a la sección 3
- Las transformaciones en Canvas HTML5
- Transladar el punto origen del Canvas
- Rotar el canvas con el comando rotate()
- Escalar el canvas con el comando scale()
- Efecto de espejo con scale() y translate()
- El método transform() para realizar un sesgo
- Modificar la escala con el método transform()
- El método transform(): mover
- El método transform(): rotación
- Un stack de transformaciones
- Crear un reloj
- Apuntes a la sección 4
- Manejo de eventos en Canvas
- El método isPointInPath()
- El método isPointInPath yel evento mousemove
- El método isPointInPath y mousemove 2da. parte
- Crear una “clase” para los eventos
- Dibujar dentro de la clase
- Añadir el evento MouseMove
- Añadir los demás eventos del ratón
- Añadir eventos a imágenes
- Arrastrar un “objeto” en el canvas
- Arrastrar una imagen en el canvas
- Crear una lupa sencilla
- Crear una aplicación de dibujo, primera parte
- Crear una aplicación de dibujo, segunda parte
- Crear una aplicación de dibujo, tercera parte
- Crear una aplicación de dibujo, final
- Apuntes a la sección 5
- Animación en Canvas de HTML5
- Introducción a la animación en el Canvas de HTML5
- Creación de clase de animación
- Crear una sencilla animación lineal
- Simular la fuerza de gravedad (physics)
- Simular movimiento oscilatorio sencillo
- Simular elasticidad de un objeto
- Simular movimiento pendular
- Animación del engrane
- Simular movimiento con Physics, primera parte
- Simular movimiento con Physics, segunda parte
- Animación del reloj
- Apuntes a la sección 6
- Crear gráficas en el canvas de HTML5
- Crear la estructura base para la gráfica de pie o de pastel
- Crear la gráfica de pie o de pastel
- Crear las etiquetas para la gráfica de pie o pastel
- Crear la estructura de la gráfica de barras
- Crear los ejes de la gráfica de barras
- Dibujar las barras de la gráfica
- Crear las etiquetas para la gráfica de barras
- Crear la estructura de la gráfica de líneas
- Crear los ejes de la gráfica de líneas
- Crear las etiquetas para la gráfica de líneas
- Dibujar las líneas de las gráficas
- Apuntes a la sección 7: Realizar gráficas con Canvas
- Realizar un juego snake con canvas
- Revisión general del juego Snake con canvas
- Snake: crear variables y preparar el lienzo
- Snake: crear la estructura de funciones
- Snake: dibuja la serpiente
- Snake: uso de las flechas del teclado
- Snake: Crea manzanas
- Snake: GameOver
- Apuntes de la sección 8: Juego Snake con Canvas
- Desarrollar un sencillo juego de rompe ladrillos o breakout
- Breakout: Introducción al juego
- Breakout: Crear canvas y variables
- Breakout: definir la estructura de las funciones
- Breakout: la función dibujar()
- Breakout: Dibujar ladrillos
- Breakout: Mover la pelotita
- Breakout: Mover el paddle
- Breakout: Detectar la colisión
- Apuntes a la sección 9: El juego de rompe ladrillos o breakout
- Suavizar trazos dibujados a mano alzada en canvas
- Planteamiento de la aplicación final
- Dibujar a mano alzada: variables y estructura de funciones
- Dibujar a mano alzada: Realizar el trazo
- Dibujar a mano alzada: Reducir los puntos del arreglo
- Dibujar a mano alzada: alisar el trazo con curvas bezier
- Crear dos columnas para relacionar en canvas HTML5
- Validación de las casillas seleccionadas
- Validación de las respuestas
- Marcador final y reinicio del juego
- Crear una aplicación para relacionar dos columnas
- Revisar la aplicación para Relacionar dos columnas con canvas HTML5
- Crear los objetos auxiliares: Texto
- Crear los objetos auxiliares: Elemento y Rectángulo
- Crear las funciones de apoyo
- Crear la estructura inicial
- Crear la función principal
- Ajusta el canvas con el evento “resize”
- Desplegar los rectángulos y los textos
- Precargar imágenes
- Iniciar el juego
- Funciones para el manejo de los eventos del ratón
- Función dibujarLinea()
- Función validar()
- Función dibujarLineasRectas()
- Función gameOver() Cuadro de resultados
- Repetir el juego: letreros
- Cálculos responsivos
- Herramienta de desarrollo web
- Seleccionar un color en una página web con ColorZilla
- Herramientas para armonizar colores en web
- Páginas para descargar fuentes e iconos
- Crear gradientes de forma sencilla por medio de dos herramientas
- Herramientas para las Cajas flexibles
- A manera de conclusión al curso “Aprende Canvas HTML5 de cero a pro”
- Despedida al curso “Aprende Canvas de HTML5”
- Apuntes al curso “Aprende Canvas HTML5”
- Ejercicios del curso “Aprende Canvas HTML5 de cero a pro”.
Time remaining or 667 enrolls left
| Don’t miss any coupons by joining our Telegram group |
