Introducción al canvas en HTML5: gráficos
  • Bienvenida al curso
  • Introducción al canvas
  • Verificación del canvas
  • El contexto en canvas
  • Crear rectángulos con Canvas
  • Crear líneas en canvas
  • Las propiedades de las líneas en Canvas HTML5
  • Estados en canvas
  • Hacer trazos con líneas con Canvas HTML5
  • Crear arcos y círculos con Canvas HTML5
  • Curvas Bézier cuadráticas en canvas HTML5
  • Curvas Bézier cúbicas en Canvas HTML5
  • Quiz: Introducción a Canvas
Crear gradientes y patrones de imágenes con canvas de HTML5
  • Gradientes lineales
  • Dirección de gradientes lineales
  • Gradientes radiales
  • Manejo de patrones en canvas
  • Sombras en objetos y textos
  • Manejo de imágenes en Canvas
  • Manejo de textos en Canvas
  • Manejo de eventos en Canvas
Crear una sencilla aplicación de dibujo con canvas
  • Creación de un grid
  • Dibujar los dos ejes en el grid
  • Dibujar ejes en un grid, segunda parte
  • Finalizar los ejes y organizar el código
  • Eventos del ratón dentro del canvas
  • Ajustar las coordenadas del ratón en el canvas
  • Dibujar una línea en forma dinámica con los eventos del ratón
  • DIbujar en forma continua con el apuntador del ratón
  • Controles para el programa de dibujo
Manejo de imágenes con canvas HTML5
  • Cargar una imagen en el canvas
  • Manipular los pixeles de una imagen
  • Aplicar el filtro Negativo
  • Aplicar filtros: blanco y negro y Alfa
  • Aplicar un Flip horizontal
  • Aplicar filtros de color
  • Seleccionar una imagen
  • Seleccionar un filtro
  • Seleccionar un filtro de color
  • Seleccionar el alfa y limpiar la foto
Manejo de Texto con CANVAS HTML5
  • Manejo de texto
  • Gradiente en textos y contornos
  • Patrones en textos y contornos
  • Propiedades de los textos
  • Alineación de texto
  • Texto alineado a un arco
Animación con CANVAS HTML5
  • Revisar la animación final con Canvas
  • Animación de una pelotita con Canvas
  • Borrar y re-dibujar la pelotita
  • Detectar las colisiones en el eje X
  • Terminar la animación básica con canvas
CANVAS: crear un juego de memoria
  • Revisar el juego de memoria terminado
  • Crear el objeto JavaScript para almacenar la información del juego
  • Pintamos el tablero del juego
  • Barajar las cartas del juego de memoria
  • Ajustar las coordenadas del canvas
  • Detectar la carta seleccionada con el apuntador del ratón
  • Seleccionar la primer carta del juego de memoria
  • Selecciona la segunda carta del juego de memoria
  • Comparar las cartas seleccionadas en la mano del juego de memoria
  • Crear un contador en el juego y finalizarlo
Crear un juego de memoria con imágenes
  • Revisar el juego de memoria con imágenes
  • Crear el arreglo múltiple de JavaScript para las imágenes
  • Concluir el juego de memoria con imágenes
Crear un juego de ahorcado
  • Revisar el juego de ahorcado terminado
  • Las variables y objetos para el juego de ahorcado
  • Crear el tablero QWERTY para el juego
  • Desplegar la palabra letra por letra en el canvas
  • Colocar el cadalso del ahorcado en el canvas
  • Detectar la tecla seleccionada por el usuario
  • Empatar la tecla seleccionada con la palabra
  • Verificar le fin del juego: Game Over
Crear un juego de "gato" con el canvas de HTML5
  • Revisar el juego del "gato" terminado
  • La lógica del juego
  • La estructura de datos y las variables del juego
  • Dibujar la grilla del juego y las fichas en el arreglo
  • Crear la función para escribir mensajes en el canvas
  • Seleccionar la ficha por el usuario para iniciar la partida
  • Pintar la ficha que seleccionó el jugador en el tablero
  • Iniciar la función que seleccionará la jugada de la máquina
  • Hacer la función que verifica los pesos en los renglones
  • Calcular el peso de las fichas para la jugada de la computadora
  • Escribir las funciones de soporte al cálculo de los pesos
  • Verificar el código con console.log()
  • Verificar el peso de las fichas en las columnas
  • Verificar el peso de las fichas en las diagonales
  • Seleccionar la mejor jugada
  • Game Over: terminal el juego
Crear un juego de minas con Canvas-HTML5
  • Revisar el juego de Minas terminado