Aprende Canvas HTML5
5.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
35 students enrolled

Aprende Canvas HTML5

La poderosa herramienta para artistas, diseñadores y profesores en la web.
5.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
35 students enrolled
Last updated 3/2020
Spanish
Spanish [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 12 hours on-demand video
  • 8 articles
  • 89 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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.
Course content
Expand all 91 lectures 11:53:36
+ Introducción a canvas de HTML5
17 lectures 02:03:46

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.

Preview 06:36

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.

Antes de empezar el curso "Aprende Canvas HTML5, de cero a pro"
05:21
  • Por medio del canvas (o lienzo en español) podremos hacer dibujos por medio de su API (entiéndase JavaScript).

  • Con el API del canvas podremos hacer círculos, rectángulos, manejar gradientes, textos, cargar y procesar imágenes entre muchas otras funcionalidades.

Preview 09:57
  • Cuando creamos formas básicas, como un rectángulo, vamos a tener dos conceptos: el relleno y el contorno.

  • En otros paquetes es normal que se creen en forma simultánea.

  • En canvas son dibujos independientes.

  • El color de relleno se controla con la propiedad fillStyle.

  • El color del contorno y de las líneas en general se controla con strokeStyle

Crear un rectángulo en Canvas
07:30
  • Las coordenadas en canvas inician en la esquina superior izquierda.

  • A partir de ese punto iniciaremos el dibujo de una línea o trazo (path).

  • Si deseamos mover el path, sin dibujar una línea, debemos utilizar el método moveTo()

Crear líneas en Canvas
07:37

Podemos almacenar, al igual que las calculadoras muy sencillas, una memoria con los colores que estamos utilizando. Si llegamos a cambiarlos, podemos "restaurarlos" en forma muy sencilla, volviendolos a llamar.

  • Las transformaciones como translate, rotate y scale.

  • La actual “clipping region” que veremos más adelante.

Propiedades de las líneas en canvas
06:53
  • Otra forma de dibujar en el canvas de HTML5, es por medio de los arcos y de unir varias líneas, lo cual lo llamaremos un "camino" o path.

  • El método beginPath() inicia un trazo o resetea el mismo.

  • Dentro del trazo podemos utilizar moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo() y arc().

Estado en canvas save/restore
05:23
  • De momento no contamos con una función para hacer círculos.

  • En cambio podemos hacer arcos.

  • La sintaxis es:

ctx.arc(x,y,radio,anguloInicial,anguloFinal,sentidoCC);

Dibujar paths o trazos en Canvas
06:38

Se denomina curvas de Bézier a un sistema que se desarrolló hacia los años 1960 para el trazado de dibujos técnicos, en el diseño aeronáutico y en el de automóviles. Su denominación es en honor a Pierre Bézier, quien ideó un método de descripción matemática de las curvas que se comenzó a utilizar con éxito en los programas de CAD.

Dibujar arcos en Canvas
07:12

Se denomina curvas de Bézier a un sistema que se desarrolló hacia los años 1960 para el trazado de dibujos técnicos, en el diseño aeronáutico y en el de automóviles. Su denominación es en honor a Pierre Bézier, quien ideó un método de descripción matemática de las curvas que se comenzó a utilizar con éxito en los programas de CAD.

Dibujar curvas Bézier Cuadráticas
07:42
  • En el Canvas de HTML 5 una curva Bézier cúbica requiere tres puntos.

  • Los dos primeros puntos son los puntos de control que se utilizan en el cálculo de Bézier cúbica y el último punto es el punto final de la curva.

  • El punto de partida de la curva es el último punto del trazo o path actual.

  • Si no existe un trazo o path, utilice los métodos beginPath () y moveTo () para definir un punto inicial.

Dibujar curvas Bézier Cúbicas
05:38
  • Determinar la posición de x, recorriendolo a la derecha.

  • Determinar la posición de y, hacia arriba o hacia abajo.

Dibujar Líneas en zigzag
08:15

Podemos hacer una espiral utilizando las funciones trigonométricas seno y coseno.

Dibujar Líneas en espiral
10:39

Calculamos el siguiente punto de la estrella mediante las funciones trigonométricas seno y coseno.

Dibujar una estrella
10:24
Dibujar un engrane, primera parte
09:17
Dibujar un engrane, segunda parte
08:43

Apuntes a la sección 1

Apuntes a la sección 1
00:01
+ Gradientes, textos e imágenes en Canvas de HTML5
13 lectures 01:48:26
  • Por medio del canvas podemos hacer gradientes lineales y radiales de manera sencilla pero muy potente.

context.createLinearGradient(x0,y0,x1,y1);


Preview 07:16

Para definir la dirección de un gradiente, definimos una línea, que nos brinda la magnitud y dirección del gradiente.

Las direcciones de los gradientes lineales
05:33
  • Los gradientes radiales se basan en definir dos círculos, los cuales pueden tener el mismo punto origen o diferente.

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Crear gradientes radiales
07:09
  • En canvas podemos cargar una figura y utilizarla como patrón.

  • Por lo general utilizamos pequeñas imágenes PNG para aprovechar la transparencia.

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

Utilizar los patrones de diseño
07:34
  • Por medio de Canvas podemos procesar una imagen.

  • Leemos la imagen por medio de DOM y la leemos en un arreglo con la función getImageData().

  • La podemos manipular pixel por pixel y luego mostrar el resultado con putImageData() o drawImage().

Introducción al Manejo de imágenes
04:50
  • Por medio de Canvas podemos procesar una imagen.

  • Leemos la imagen por medio de DOM y la leemos en un arreglo con la función getImageData().

  • La podemos manipular pixel por pixel y luego mostrar el resultado con putImageData() o drawImage().

Aplicar un filtro a la imagen
09:58
  • Podemos cambiar el tamaño y tipo de fuente con la propiedad font.

  • El ancho de la letra con lineWidth, su color con fillStyle y el contorno con strokeStyle.

  • La sombra la podemos controlar con shadowColor, shadowOffsetX, shadowOffsetY y shadowBlur.

  • Escribimos el texto con fillText() y el contorno con strokeText().

Manejo de texto en Canvas
06:21
  • Desde el canvas podemos utilizar los eventos de JavaScript como:

    • onmousemove()

    • onmousedown()

    • onmouseup()

Manejo de eventos en Canvas
15:36
  • Dividimos el círculo (2*PI) entre el número de pétalos.

  • Calculamos los puntos de control con las funciones seno y coseno.

  • Dibujamos el pétalo con una curva bézier cúbica, donde el punto inicial y final son el mismo (el centro de la flor).

  • Dibujamos el centro de la flor con un círculo.

Dibujar una flor con curvas bezier
13:54
  • Creamos una función para dibujar la flor.

  • Utilizamos el evento mousedown() para detectar el clic de ratón.

  • Utilizamos el método random() para el tamaño y color de la flor.

Dibujar una flor con mousedown
09:43
  • Utilizaremos el movimiento del ratón para dibujar.

  • Al levantar el apuntador del ratón, dejaremos de dibujar.

Dibujar con el ratón
11:13
  • Utilizaremos el movimiento del ratón para dibujar.

  • Al levantar el apuntador del ratón, dejaremos de dibujar.

Controles para los parámetros de dibujo
09:18

Apuntes a la sección 2

Apuntes a la sección 2
00:01
+ Manejo de imágenes con el Canvas de HTML5
8 lectures 01:20:14

Por medio de un elemento <select> podemos cargar diferentes archivos de imágenes para posteriormente procesarlo.

Preview 14:00

Podemos aplicar diferentes algoritmos de filtros a la imagenes.

Aplicar filtros a la imagen
12:16
  • Para hacer un flip, necesitamos intercambiar los pixeles en forma horizontal.

  • Necesitamos variables temporales para intercambiar los valores de los bytes.

Hacer un flip de la imagen
09:35
  • Podemos modificar el valor de cada canal (rgba) por un factor y un desplazamiento.

  • Por lo general, se aplica un objeto de tipo ra, rb, donde el primero es el factor (porcentaje) y el segundo es el desplazamiento (offset).

Aplicar filtro de color
11:31

Podemos modificar el canal alfa modificando cada pixel o aplicando un objeto transformador de color.

Modificar el canal alfa
08:10
  • Podemos recortar imágenes al momento de cargarla.

Recortar una imagen
11:03
  • Utilizaremos la función setInterval() para ejecutar cada n-milisegundos el proceso de pixelado.

  • Tomamos un pixel y lo replicamos en un cuadro nxn.

  • Repetimos el proceso hasta que n=1.

Pixelado de una imagen
13:38

Apuntes a la sección 3

Apuntes a la sección 3
00:01
+ Las transformaciones en Canvas HTML5
11 lectures 57:24
  • Una primera transformación es modificar el origen del canvas.

ctx.translate(x,y);

Preview 04:20
  • Podemos rotar el canvas en un ángulo en radianes.

ctx.rotate(ángulo en radianes);

Rotar el canvas con el comando rotate()
05:25
  • Podemos cambiar la escala del canvas en forma horizontal, vertical o ambas.

  • Donde 1 = 100%, 0.5 = 50% o 2 = 200%

ctx.scale(escalaAncho,escalaAlto);

Escalar el canvas con el comando scale()
04:30

Por medio del comando scale() podemos invertir el canvas.

Efecto de espejo con scale() y translate()
07:42

Podemos realizar las transformaciones translate(), scale() y rotate(), y podemos añadir otro efecto de transformación: el sesgado.

El método transform() para realizar un sesgo
06:27

Podemos realizar las transformaciones translate(), scale() y rotate(), y podemos añadir otro efecto de transformación: el sesgado.

Modificar la escala con el método transform()
04:07
  • Podemos realizar las transformaciones translate(), scale() y rotate(), y podemos añadir otro efecto de transformación: el sesgado.

  • Para ello, necesitamos una matriz de transformación.

El método transform(): mover
04:23
  • Para el método transform necesitamos 6 parámetros:

cxt.transform(a,b,c,d,e,f);

  • Los valores por omisión (que no realizan ninguna transformación) son los siguientes:

cxt.transform(1,0,0,1,0,0);


El método transform(): rotación
05:27

Podemos hacer un stack o pila de transformaciones con los métodos save() y restore().

Un stack de transformaciones
05:07

Haremos un reloj ocupando las transformaciones y el objeto Date de JavaScript.

Crear un reloj
09:55

Apuntes a la sección 4

Apuntes a la sección 4
00:01
+ Manejo de eventos en Canvas
16 lectures 02:10:36
  • Podemos detectar las coordenadas se encuentran en una forma (path).

isPointInPath(x, y);


Preview 04:34

Podemos unir el evento del ratón mousemove y el método isPointInPath(x, y);

El método isPointInPath yel evento mousemove
05:39

Podemos redibujar las formas y evaluarlas de una a una.

El método isPointInPath y mousemove 2da. parte
07:23

Podemos crear una clase para manejar los eventos del canvas.

Crear una “clase” para los eventos
07:51
  • Podemos almacenar la función de dibujar en la clase

Dibujar dentro de la clase
10:14
  • iniciarRegion

  • dibujaForma

  • anadeListenerRegion

  • cierraRegion

Añadir el evento MouseMove
11:10
  • Añadir los eventos mouseUp, mouseDown, mouseOver, mouseOut.

  • iniciarRegion

  • dibujaForma

  • anadeListenerRegion

  • cierraRegion

Añadir los demás eventos del ratón
09:44
  • El métodos isPointInPath no detecta una zona del canvas con una imagen.

  • Podemos añadir una forma rectangular a la imagen para detectarla.

Añadir eventos a imágenes
09:17

Podemos “arrastrar y soltar” una forma si recalculamos las coordenadas y repintamos la forma.

Arrastrar un “objeto” en el canvas
06:10
  • Podemos “arrastrar y soltar” una forma si recalculamos las coordenadas y repintamos la forma.

  • Cargamos la imagen y le asignamos una forma para detectarla.

Arrastrar una imagen en el canvas
05:08
  • Necesitamos una imagen pequeña y una grande.

  • Detectamos la posición del ratón y recortamos la imagen grande.

Crear una lupa sencilla
14:01
  • Podemos realizar una sencilla aplicación de dibujo con lo aprendido hasta el momento.

Crear una aplicación de dibujo, primera parte
09:53

Definimos los controladores y algunas funciones auxiliares.

Crear una aplicación de dibujo, segunda parte
12:49
  • Aplicamos los controladores de eventos del ratón.

Crear una aplicación de dibujo, tercera parte
09:02
  • Aplicamos los controladores de eventos del ratón.

Crear una aplicación de dibujo, final
07:40

Apuntes a la sección 5

Apuntes a la sección 5
00:01
+ Animación en Canvas de HTML5
12 lectures 01:42:58
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Preview 12:26
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Creación de clase de animación
10:10
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Crear una sencilla animación lineal
05:25
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Simular la fuerza de gravedad (physics)
08:41
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Simular movimiento oscilatorio sencillo
09:45
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Simular elasticidad de un objeto
12:02
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Simular movimiento pendular
09:05
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Animación del engrane
09:18
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Simular movimiento con Physics, primera parte
09:33
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Simular movimiento con Physics, segunda parte
12:14
  • La animación en el canvas consiste en:

    • Actualizar los datos

    • Borrar el canvas

    • Dibujar en el canvas

Al conjunto de estas operaciones la llamaremos “cuadro” o “frame”. A la velocidad en que se ejecutan los cuadros la llamamos frames por segundo o fps.

Animación del reloj
04:18

Apuntes a la sección 6

Apuntes a la sección 6
00:01
+ Crear gráficas en el canvas de HTML5
11 lectures 01:45:33

Tomando los ángulos de los porcentajes en diferentes arcos, podemos realizar una gráfica de pastel o pie.

Preview 10:03

Tomando los ángulos de los porcentajes en diferentes arcos, podemos realizar una gráfica de pastel o pie.

Crear la gráfica de pie o de pastel
08:43

Tomando los datos para crear las etiquetas de cada uno de los elementos.

Crear las etiquetas para la gráfica de pie o pastel
10:15
  • Tomando los datos para crear las gráficas de barras.

Crear la estructura de la gráfica de barras
07:18

Utilizaremos el método translate y rotate para desplegar las etiquetas.

Crear los ejes de la gráfica de barras
11:43

Graficaremos cada una de las líneas en forma separada.

Dibujar las barras de la gráfica
09:26
  • Crearemos la estructura de la gráfica.

Crear las etiquetas para la gráfica de barras
08:55
  • Mostrar las etiquetas en el eje x y y.

Crear la estructura de la gráfica de líneas
10:40
  • Tomamos los datos y los graficamos con su etiqueta.

Crear los ejes de la gráfica de líneas
08:40
  • Tomamos los datos y los graficamos con su etiqueta.

Crear las etiquetas para la gráfica de líneas
09:12
  • Tomamos los datos y los graficamos con su etiqueta.

Dibujar las líneas de las gráficas
10:38
+ A manera de conclusión al curso "Aprende Canvas HTML5 de cero a pro"
3 lectures 04:37

Con este video damos por concluido el curso de "Aprende Canvas de HTML5".

Despedida al curso "Aprende Canvas de HTML5"
04:33

Apuntes al curso "Aprende Canvas HTML5"

Apuntes al curso "Aprende Canvas HTML5"
00:01

En esta clase encontrarás los archivos de los ejercicios del curso.

Ejercicios del curso "Aprende Canvas HTML5 de cero a pro".
00:02
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.