🇪🇸 Aprende Canvas HTML5

🇪🇸 Aprende Canvas HTML5

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 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate