Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreAprende Canvas HTML5
Rating: 4.4 out of 54.4(36 ratings)
9,411 students
Aprende Canvas HTML5
La poderosa herramienta para artistas, diseñadores y profesores en la web.
Created byFrancisco Javier Arce Anguiano
Last updated 4/2026
Spanish
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.
Explore related topics
Course content
13 sections • 152 lectures • 20h 47m total length
- Bienvenida al curso Aprende Canvas HTML5 de cero a pro6: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"5:21
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.
- Introducción al Canvas de HTML59:57
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.
- Crear un rectángulo en Canvas7:30
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 líneas en Canvas7:37
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()
El método utilizado en HTML5 Canvas para mover el punto de inicio del trazado (path) a una nueva posición sin dibujar una línea es moveTo(x, y). Cómo funciona: Funciona como "levantar el lápiz" del papel, trasladándolo a una nueva coordenada sin crear una marca, para comenzar una nueva sub-ruta.
- Propiedades de las líneas en canvas6:53
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.
- Estado en canvas save/restore5:23
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().
- Dibujar paths o trazos en Canvas6:38
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 arcos en Canvas7: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áticas7:42
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.
Para dibujar una curva Bézier cuadrática en un Canvas de HTML5, el método que debes usar es: quadraticCurveTo(cpx, cpy, x, y) Aquí te detallo qué hace cada parámetro: cpx, cpy: Las coordenadas del punto de control. x, y: Las coordenadas del punto final de la curva.
- Dibujar curvas Bézier Cúbicas5:38
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 Líneas en zigzag8:15
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 espiral10:39
Podemos hacer una espiral utilizando las funciones trigonométricas seno y coseno.
- Dibujar una estrella10:24
Calculamos el siguiente punto de la estrella mediante las funciones trigonométricas seno y coseno.
- Dibujar un engrane, primera parte9:17
- Dibujar un engrane, segunda parte8:43
- Crear un rectángulo con esquinas redondeadas utilizando cuevas bezier12:32
Por medio de las curvas bezier podemos redondear las esquinas de un rectángulo.
ctx.moveTo(x, y+r);
//
ctx.lineTo(x, y+h-r);
ctx.quadraticCurveTo(x, y+h, x+r, y+h);
- Apuntes a la sección 10:07
Apuntes a la sección 1
- Introducción al CANVAS-HTML5
- Crear gradientes lineales7:16
Por medio del canvas podemos hacer gradientes lineales y radiales de manera sencilla pero muy potente.
context.createLinearGradient(x0,y0,x1,y1);
- Las direcciones de los gradientes lineales5:33
Para definir la dirección de un gradiente, definimos una línea, que nos brinda la magnitud y dirección del gradiente.
- Crear gradientes radiales7:09
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);
- Utilizar los patrones de diseño7:34
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");
- Introducción al Manejo de imágenes4: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 imagen9:58
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().
- Manejo de texto en Canvas6:21
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 eventos en Canvas15:36
Desde el canvas podemos utilizar los eventos de JavaScript como:
onmousemove()
onmousedown()
onmouseup()
- Dibujar una flor con curvas bezier13:54
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 mousedown9:43
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 con el ratón11: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 dibujo9:18
Utilizaremos el movimiento del ratón para dibujar.
Al levantar el apuntador del ratón, dejaremos de dibujar.
- Apuntes a la sección 20:07
Apuntes a la sección 2
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Gradientes, textos e imágenes en Canvas de HTML5
- Cargar archivos de imágenes al canvas de HTML514:00
Por medio de un elemento <select> podemos cargar diferentes archivos de imágenes para posteriormente procesarlo.
- Aplicar filtros a la imagen12:16
Podemos aplicar diferentes algoritmos de filtros a la imagenes.
- Hacer un flip de la imagen9:35
Para hacer un flip, necesitamos intercambiar los pixeles en forma horizontal.
Necesitamos variables temporales para intercambiar los valores de los bytes.
- Aplicar filtro de color11:31
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).
- Modificar el canal alfa8:10
Podemos modificar el canal alfa modificando cada pixel o aplicando un objeto transformador de color.
- Recortar una imagen11:03
Podemos recortar imágenes al momento de cargarla.
- Pixelado de una imagen13:38
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.
- Manejo básico de Sprites con canvas11:14
img Especifica la imagen, el lienzo o el elemento de video que se utilizará.
sx (opcional) La coordenada x donde empezar a recortar.
sy (opcional) La coordenada y dónde empezar a recortar
swidth (opcional) El ancho de la imagen recortada
sheight (opcional) La altura de la imagen recortada
- Creando una animación tipo sprite con archivos de imágenes10:35
Por medio de cargar diferentes archivos de figuras podemos hacer un sprite.
- Animación con un sprite de anchos y alturas diferentes en el canvas11:08
Por medio de un par de arreglos (y mucha paciencia) podemos manejar los sprites con dibujos con anchos y alturas diferentes.
- Uso del teclado para coordinar las animaciones a base de sprites con el canvas10:15
Por medio del teclado podemos hacer que se ejecuten diferentes animaciones.
- Activar las animaciones por medio del teclado con archivos individuales (1era)8:17
Por medio del teclado podemos hacer que se ejecuten diferentes animaciones.
- Activar las animaciones por medio del teclado con archivos individuales (2da)8:40
Por medio del teclado podemos hacer que se ejecuten diferentes animaciones.
- Realizar un fondo deslizable (scrolling background)14:28
Necesitamos una imagen que coincida su inicio y su fin.
- Juntar el personaje con el fondo deslizables en el canvas7:36
Necesitamos una imagen que coincida su inicio y su fin:
- Optimizar las gráficas y la carga de imágenes con el canvas de HTML512:55
Podemos optimizar la carga de imágenes y añadir la funcionalidad para detener la carrera.
- Añadir objetos a la animación en Canvas de HTML510:10
Podemos optimizar la carga de imágenes y añadir la funcionalidad para detener la carrera.
- Activar el "salto" del personaje en Canvas de HTML56:14
Activar el "salto" del personaje en Canvas de HTML5
- Apuntes a la sección 30:07
Apuntes a la sección 3
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Transladar el punto origen del Canvas4:20
Una primera transformación es modificar el origen del canvas.
ctx.translate(x,y);
- Rotar el canvas con el comando rotate()5:25
Podemos rotar el canvas en un ángulo en radianes.
ctx.rotate(ángulo en radianes);
- Escalar el canvas con el comando scale()4:30
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);
- Efecto de espejo con scale() y translate()7:42
Por medio del comando scale() podemos invertir el canvas.
- El método transform() para realizar un sesgo6: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()4:07
Podemos realizar las transformaciones translate(), scale() y rotate(), y podemos añadir otro efecto de transformación: el sesgado.
- El método transform(): mover4:23
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(): rotación5:27
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);
- Un stack de transformaciones5:07
Podemos hacer un stack o pila de transformaciones con los métodos save() y restore().
- Crear un reloj9:55
Haremos un reloj ocupando las transformaciones y el objeto Date de JavaScript.
- Apuntes a la sección 40:07
Apuntes a la sección 4
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Transformaciones en HTML5-Canvas
- El método isPointInPath()4:34
Podemos detectar las coordenadas se encuentran en una forma (path).
isPointInPath(x, y);
- El método isPointInPath yel evento mousemove5:39
Podemos unir el evento del ratón mousemove y el método isPointInPath(x, y);
- El método isPointInPath y mousemove 2da. parte7:23
Podemos redibujar las formas y evaluarlas de una a una.
- Crear una “clase” para los eventos7:51
Podemos crear una clase para manejar los eventos del canvas.
- Dibujar dentro de la clase10:14
Podemos almacenar la función de dibujar en la clase
- Añadir el evento MouseMove11:10
iniciarRegion
dibujaForma
anadeListenerRegion
cierraRegion
- Añadir los demás eventos del ratón9:44
Añadir los eventos mouseUp, mouseDown, mouseOver, mouseOut.
iniciarRegion
dibujaForma
anadeListenerRegion
cierraRegion
- Añadir eventos a imágenes9:17
El métodos isPointInPath no detecta una zona del canvas con una imagen.
Podemos añadir una forma rectangular a la imagen para detectarla.
- Arrastrar un “objeto” en el canvas6:10
Podemos “arrastrar y soltar” una forma si recalculamos las coordenadas y repintamos la forma.
- Arrastrar una imagen en el canvas5:08
Podemos “arrastrar y soltar” una forma si recalculamos las coordenadas y repintamos la forma.
Cargamos la imagen y le asignamos una forma para detectarla.
- Crear una lupa sencilla14:01
Necesitamos una imagen pequeña y una grande.
Detectamos la posición del ratón y recortamos la imagen grande.
- Crear una aplicación de dibujo, primera parte9:53
Podemos realizar una sencilla aplicación de dibujo con lo aprendido hasta el momento.
- Crear una aplicación de dibujo, segunda parte12:49
Definimos los controladores y algunas funciones auxiliares.
- Crear una aplicación de dibujo, tercera parte9:02
Aplicamos los controladores de eventos del ratón.
- Crear una aplicación de dibujo, final7:40
Aplicamos los controladores de eventos del ratón.
- Apuntes a la sección 50:07
Apuntes a la sección 5
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Manejo de eventos
- Introducción a la animación en el Canvas de HTML512: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ón10: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 lineal5: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)8: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 sencillo9: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 objeto12: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 pendular9: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 engrane9: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 parte9: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 parte12: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 reloj4: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.
- Apuntes a la sección 60:07
Apuntes a la sección 6
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Animaciones en CANVAS-HTML5
- Crear la estructura base para la gráfica de pie o de pastel10: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 pastel8:43
Tomando los ángulos de los porcentajes en diferentes arcos, podemos realizar una gráfica de pastel o pie.
- Crear las etiquetas para la gráfica de pie o pastel10:15
Tomando los datos para crear las etiquetas de cada uno de los elementos.
- Crear la estructura de la gráfica de barras7:18
Tomando los datos para crear las gráficas de barras.
- Crear los ejes de la gráfica de barras11:43
Utilizaremos el método translate y rotate para desplegar las etiquetas.
- Dibujar las barras de la gráfica9:26
Graficaremos cada una de las líneas en forma separada.
- Crear las etiquetas para la gráfica de barras8:55
Crearemos la estructura de la gráfica.
- Crear la estructura de la gráfica de líneas10:40
Mostrar las etiquetas en el eje x y y.
- Crear los ejes de la gráfica de líneas8:40
Tomamos los datos y los graficamos con su etiqueta.
- Crear las etiquetas para la gráfica de líneas9:12
Tomamos los datos y los graficamos con su etiqueta.
- Dibujar las líneas de las gráficas10:38
Tomamos los datos y los graficamos con su etiqueta.
- Apuntes a la sección 7: Realizar gráficas con Canvas0:07
Apuntes a la sección 7
- Revisión general del juego Snake con canvas4:53
Por medio del Canvas podemos realizar un juego de tipo “Snake” (uno de los primeros juegos realizados en computadora.
Snake obtuvo una audiencia masiva tras convertirse en un juego estándar pre-grabado en los teléfonos Nokia.
- Snake: crear variables y preparar el lienzo11:58
En este video prepararemos el Canvas y escribiremos las variables y constantes para desarrollar el juego Snake.
- Snake: crear la estructura de funciones4:30
En este video escribiremos la estructura de las funciones del juego:
inicio
play()
borrarLienzo()
dibujarManzana()
moverSnake()
dibujarSnake()
dibujaCuadroSnake()
gameOver()
crearManzana()
cambiaDireccion()
- Snake: dibuja la serpiente7:36
En este video escribiremos la estructura de las funciones del juego:
borrarLienzo()
moverSnake()
dibujarSnake()
dibujaCuadroSnake()
- Snake: uso de las flechas del teclado7:15
En este video escribiremos la función del juego:
cambiaDireccion()
- Snake: Crea manzanas10:48
En este video escribiremos las siguientes funciones del juego:
crearManzana()
- Snake: GameOver6:32
En este video escribiremos la función del juego: gameOver()
- Apuntes de la sección 8: Juego Snake con Canvas0:08
Apuntes de la sección 8: Juego Snake con Canvas
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Breakout: Introducción al juego3:19
Breakout es un videojuego arcade desarrollado por Atari, Inc. y lanzado al mercado en 1976.
Fue creado por Nolan Bushnell y Steve Bristow, influenciados por el videojuego de 1972 Pong, también de Atari.
- Breakout: Crear canvas y variables9:08
En este video escribiremos las variables y definiremos el canvas del juego.
- Breakout: definir la estructura de las funciones8:10
En este video escribiremos las estructuras de las funciones del juego.
pulsarTecla(e)
soltarTecla(e)
moverRaton(e)
detectaColision()
dibujarBola()
dibujarPaddle()
dibujarLadrillos()
dibujarMarcador()
dibujarVidas()
dibujar()
- Breakout: la función dibujar()9:35
En este video escribiremos las estructuras la función del juego.
dibujar()
dibujarBola()
dibujarPaddle()
dibujarLadrillos()
dibujarMarcador()
dibujarVidas()
- Breakout: Dibujar ladrillos6:54
Dibujar ladrillos
Ciclo de columnas
Ciclo de renglones
Si el estatus es igual a uno:
Dibujar ladrillo
- Breakout: Mover la pelotita10:01
pulsarTecla()
soltarTecla()
moverRaton()
dibujar()
- Breakout: Mover el paddle8:17
pulsarTecla()
soltarTecla()
moverRaton()
dibujar()
- Breakout: Detectar la colisión11:11
Recorrer todos los ladrillos con los dos ciclos
Verificar colisión
Sumar marcador
Apagar el ladrillo
Determinar si es fin del juego
- Apuntes a la sección 9: El juego de rompe ladrillos o breakout0:08
Apuntes a la sección 9: El juego de rompe ladrillos o breakout
¿Algo para mejorar en esta sección?
¿Algún comentario o aporte?
Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.
- Planteamiento de la aplicación final7:17
Dibujar a mano alzada varias líneas y suavizarlas con curvas Bezier.
- Dibujar a mano alzada: variables y estructura de funciones10:32
Los arreglos o vectores serán fundamentales para almacenar los puntos de las imágenes.
Haremos las estructuras de las funciones.
- Dibujar a mano alzada: Realizar el trazo11:03
Escribiremos el código de los manejadores de eventos y la limpieza del canvas.
- Dibujar a mano alzada: Reducir los puntos del arreglo14:56
Para casi cualquier línea, se almacenan muchos puntos en el arreglo.
Un punto del alisamiento de los trazos será reducir dichos puntos y redibujarlos.
Al número de elementos seleccionados, lo conoceremos como factor de alisamiento.
- Dibujar a mano alzada: alisar el trazo con curvas bezier13:56
Podemos utilizar las curvas Bezier cuadráticas (tres punto) para “suavizar” un trazo.
- Crear dos columnas para relacionar en canvas HTML511:12
Creamos los elementos de dos columnas en forma aleatoria.
- Validación de las casillas seleccionadas9:30
Necesitamos validar si el inicio de la línea coincide con un rectángulo de la columna izquierda y el final de la línea coincide con un rectángulo de la columna derecha.
- Validación de las respuestas12:56
Evaluaremos si las respuestas son correctas o no y las pintaremos finalmente como verdes si son correctas y rojas si no.
- Marcador final y reinicio del juego12:09
Por último haremos un marcador final y el proceso de reinicio.
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.