Sé creativo con el Canvas de HTML5

1. ¡Hola!: Bienvenido al curso HTML5 Canvas, donde vas de principiante para ser creador totalmente seguro en gráficos y animaciones usando el Canvas. Mi nombre es Chris, y estoy aquí para guiarlos paso a paso a través de este proceso. Tengo muchos años de experiencia desarrollando sitios web y también creando cursos en línea con miles de estudiantes y cientos de reseñas de cinco estrellas. Este curso ha sido diseñado para que un principiante te enseñe todo sobre cómo dibujar al lienzo usando JavaScript. Al final de este curso, tendrás la confianza y la capacidad de dibujar o animar casi cualquier cosa que puedas imaginar, y mostrarlo dentro de páginas web, o en un navegador web. Te llevaría paso a paso desde los conceptos básicos de Canvas hasta técnicas más avanzadas como transformaciones, animaciones, guardar e instalar, y también cómo manipular datos de píxeles en imágenes. Empezamos configurando el Lienzo y te presentamos el guión básico en técnicas de dibujo. Echaremos un vistazo a las líneas y bocanadas y cómo dibujar un muy formas. Te mostraré cómo agregar texto e imágenes al lienzo, eliminar secciones del lienzo junto con la adición algunos efectos bonitos como gradientes, patrones, y sombras. medida que avanzas por el curso, avanzaremos aún más las cosas mirando técnicas más avanzadas, veremos diversos tipos de curvas, métodos de guardar y restaurar, y cómo utilizar las transformaciones. También aprenderás a usar bucles, animaciones, e incluso a modificar los datos de píxeles de las imágenes para permitirnos añadir efectos como hacer fotos en blanco y negro. Terminamos dejándote con un reto, dibujemos la cara de Mickey Mouse. Pongamos en práctica tus nuevas habilidades. El estudiante ideal de este curso es alguien con alguna experiencia en diseño o desarrollo web, y que busca aprender una nueva forma de habilidad. Learning Canvas también es ideal para cualquier persona que busque construir juegos basados en navegador. Un poco de experiencia de los conceptos básicos de JavaScript sería un beneficio a medida que avanzas por este curso. No obstante, no hay otros requisitos, tomar este curso, solo necesidad de aprender. Siéntete libre de echar un vistazo a la descripción del curso y también al Lienzo de la conferencia para descubrir todo lo que aprenderás de este curso. Presiona el botón Tomar este curso, y espero verte dentro del curso. 2. ¿Qué es el Canvas de HTML5?: Está bien chicos. En primer lugar, antes de empezar a dibujar algo sobre el Canvas, solo quiero tomarme uno o dos momentos solo para echar un vistazo rápido qué podemos hacer con HTML5 Canvas y qué es exactamente el Canvas. Entonces básicamente el Canvas es un elemento HTML. Al igual que muchas de las etiquetas HTML, como las etiquetas de párrafo, tenemos un elemento de apertura y un de cierre. Entonces, a diferencia de la etiqueta de imagen, por ejemplo, no es una etiqueta de autocierre. Por lo que no necesitamos la etiqueta de apertura, y luego la etiqueta de cierre con la varilla delantera. Se trata de un área rectangular de una página web que podemos utilizar para dibujar. Para permitirnos dibujar, utilizamos un lenguaje de scripting, que suele ser JavaScript, pero se pueden usar lenguajes de scripting. Pero para lo que resta de este curso, estaremos usando JavaScript como es el lenguaje más popular utilizado con el Canvas. Si sí necesitas ayuda con tutoriales o referencias en línea, prácticamente todas están basadas en JavaScript y por último, el Canvas fue agregado en HTML5. Por lo que es bastante nuevo, pero está bastante bien apoyado. Ahora echemos un vistazo a una o dos cosas que podemos hacer con el Canvas. Por lo que como mencionamos antes, podemos usar el Lienzo para dibujar. Podemos dibujar cosas como rectángulos, círculos, líneas rectas, y arcos, y muchos de los diferentes tipos de gráficos en los que nos meteremos a medida que avanzamos por el curso. Incluso podemos dibujar texto al Lienzo. Podemos agregar algún texto simple o podemos en varias fuentes diferentes, diferentes colores. Podemos agregar gradientes e incluso animar ese texto. El Canvas se puede utilizar para añadir también imágenes y sus diversas técnicas de manipulación de imágenes diferentes, que veremos a medida que avancemos por el curso. También echaremos un vistazo a diversas animaciones sobre diversas transformaciones a medida que avanzamos por el curso. Hay un montón de hechos geniales que puedes agregar como rotaciones y puedes aplicar algunas de estas animaciones para realmente crear juegos. En realidad no se cubren muchos juegos en este curso. Muchas de las técnicas que usaremos entonces se pueden aplicar a los juegos si eso es algo en lo que quieres avanzar. Por último, también podemos patrones, gradientes, y sombras a los gráficos y al texto para que eso se vea realmente bien. Por lo que mencioné antes que el Canvas tiene una abertura y una etiqueta de cierre, y también que el Canvas está bastante bien manchado ahora. Pero basta con equiparnos para navegadores compatibles. Entre estas dos etiquetas, podemos agregar algo de texto plano. Simplemente deja que el usuario sepa que el Canvas no está soportado en su navegador y tal vez un mensaje solo para pedirles que actualicen a un navegador más reciente. Por lo que podemos usar esto como una caída de respaldo en los navegadores compatibles. Nuevamente, como muchos elementos sobre HTML, también podemos agregar atributos a la etiqueta de apertura de Canvas. Muchas de estas se verán muy familiares si has hecho un poco de HTML en el pasado. Este ejemplo tiene un ID, cual vamos a estar usando a lo largo de este curso para apuntar al Canvas. Este ejemplo tiene un atributo width y height para establecer el tamaño del Canvas que desea usar, y también podemos agregar un atributo style, agregar cosas como colores de fondo, y bordes. Veamos qué es el lienzo HTML5, algunas cosas para las que podemos usarlo. Entonces ahora pasemos al siguiente video. En realidad voy a empezar con la configuración del Canvas. 3. Conceptos básicos de Canvas: Configuración del Canvas: Quiero comenzar en este video haciendo alguna configuración básica de Canvas. Voy a trabajar para este video y para el resto de este curso en CodePen, que está disponible en codepen.io. Como puedes ver, CodePen es un patio de juegos para la web front end. Básicamente, lo que podemos hacer al usar CodePen, es que podemos tener editor de texto en línea, donde podemos usar nuestro código. También al lado en una pantalla dividida, también podemos tener una ventana del navegador que muestra los resultados de nuestro código. Haremos esto en lo que se llama Pluma. Un bolígrafo es sólo su propio área autónoma, como podemos crear un sitio web usando un bolígrafo. También voy a estar usando Plumas para cada sección de este curso, solo para que estén contenidas todas las diferentes áreas y puedas utilizarlas para futuras referencias. Por supuesto, si no quieres usar CodePen, puedes usar un editor de texto basado en escritorio y también un navegador web, así que siéntete libre de hacer esa ruta si lo prefieres. Pero para lo que resta de este curso, voy a usar CodePen. Si CodePen es algo que no has usado antes, haz clic en el botón “Regístrate” en la esquina superior derecha, y luego sigue el sencillo proceso de registro para crear una cuenta. CodePen sí viene con un costo mensual si sí quieres usar una de las cuentas pro. No obstante, todo lo que necesitas para lo que resta de este curso es inscribirte en uno de los planes gratuitos. Adelante y da click en Regístrate para ellos. Deberías presionar el botón “Iniciar sesión”. Simplemente voy a iniciar sesión en mi cuenta y de ahí, comenzar con configurar el Canvas. Voy a dar click en “Nueva Pluma”. Cuando empieces por primera vez, esta será la pantalla que veas. Es posible que tenga un diseño ligeramente diferente. El flecha blanca que puedes ver en el lado derecho, va a ser el área donde podamos ver los resultados de nuestro código. Efectivamente, va a ser el navegador web. Tengo una sección HTML, una sección CSS, y una sección JavaScript. Para este video, sólo voy a estar concentrándome en la sección HTML. Yo sólo voy a reorganizar esto sólo para conseguir pequeño un poco más de espacio ahí dentro. Entonces solo voy a dar clic en el Bolígrafo y luego llamarlo “Configuración del lienzo”. Entonces voy a guardar eso para empezar. El primero que quiero hacer en la sección HTML es crear un esqueleto HTML básico. Eso es agradable y fácil de hacer en CodePen. Si escribes htlm:5. Podemos usar los comandos ML y la pestaña Hit, entonces eso crea una inferencia de escala HTML5 para empezar. Yo lo pondría directamente al título de los documentos. Yo sólo voy a llamarlo igual, “Configurando el lienzo”. Ahora, estamos bien para ir dentro de la sección de cuerpos. Sabemos por el último video, que el lienzo HTML5 tiene las etiquetas de Canvas. Tenemos la etiqueta de Canvas de apertura, y también tenemos la etiqueta de cierre con la inclinación hacia delante. Comience con estos dos, luego agreguemos algunos atributos dentro de la etiqueta Canvas de extremo abierto. Sabemos que podemos dibujar gráficos con el Canvas usando scripting. Mencionaré que vamos a estar usando JavaScript para el resto del curso. Vincularemos el guión al Canvas haciendo referencia al ID del Canvas, que ahora vas a establecer como atributo. Dale un DNI al Canvas y lo llamas lo que quieras, pero simplemente voy a llamarlo “MyCanvas”. Si guardamos eso, notaremos en el lado derecho, que en realidad no hay lienzo dibujado en la pantalla. Esto se debe a que las etiquetas de Canvas como son, en realidad, no dibujan nada por defecto. Sólo para que podamos ver debajo del título, solo voy a agregar un poco de estilo ahí. Esto es solo estilos CSS estándar. Yo sólo voy a añadir un color al fondo. Empecemos por etiqueta en el Lienzo y luego agreguemos un fondo. Voy a hacer el mío rojo. Ahí vamos. Ese es el Lienzo que aparece ahí en la pantalla. Podemos ver que hay un rectángulo rojo aparecer. Esto se debe a que por defecto, el ancho del Canvas es de 300 píxeles de ancho con un valor predeterminado de 150 píxeles de altura. Por supuesto, no podemos cambiar esto en los atributos. Podemos agregar un ancho de 300 píxeles y además añadir una altura de 300 píxeles. Ahora, puedes ver que tenemos un bonito lienzo cuadrado para empezar, luego finalmente, para navegadores no compatibles, agreguemos el texto de reserva que vimos en el último video. Empezaremos con el mensaje de tu navegador, no es compatible con el lienzo HTML5. Por favor considere actualizar o cambiar su navegador para una mejor experiencia. Justo así. Se puede ver si guardamos la Pluma en el texto, que simplemente colocará ahí dentro, realidad no aparece en el Lienzo en el lado derecho. Esto se debe a que nuestro entorno de demostración ve completamente el Canvas, pero claro, es una buena práctica dejar eso ahí dentro para las personas que no tienen un navegador actualizado. Ahora, tenemos los fundamentos de cómo configurar el Canvas, ahora, pasemos al siguiente video, bajaremos algún dibujo. 4. Conceptos básicos de Canvas: Guiones y dibujo de rectángulos: Ahora tenemos la configuración básica del lienzo en la pantalla. Ahora vamos a pasar a agregar algunos scripting, y en realidad dibujar algunos rectángulos sobre el lienzo. Lo primero que queremos hacer es decir que hay un pequeño mensaje de error en la parte inferior. Voy a empezar primero dando click en esto. Se puede ver que el CodePen no necesita una declaración doctype, así que solo voy a eliminar eso, solo para deshacerme de ese mensaje, luego guardar. Por supuesto, asegúrate de que eso quede dentro si estás usando en un editor de texto en un navegador web separado, o de hecho, si estás desplegando en la web, asegúrate de que eso se mantenga ahí dentro. Para este video, voy a crear un bolígrafo nuevo, y podemos o crear un bolígrafo nuevo de la misma manera que el último video, o en realidad podemos simplemente hacer clic en el tenedor uno. Esto creará duplicados. Podemos entonces cambiar el nombre de estos duplicados, y esto nos ahorrará escribir todo el esqueleto HTML una y otra vez. Voy a llamar a esto rectángulos de scripting y dibujo, agregar lo mismo en el título, y hacer un poco más de espacio allí. Lo primero que tenemos que hacer para acceder al scripting es crear las etiquetas de script. Entonces solo sopla el lienzo, voy a admin, justo ahí. Entonces abre las etiquetas de script, y luego necesitamos una etiqueta de cierre, y es igual que usar JavaScripts estándar. Utilizamos JavaScript en el pasado, muchas de las cosas que vamos a hacer en este curso se verán bastante familiares. Si no, no te preocupes, deberías poder seguir bien. Vamos a empezar agarrando el lienzo por el DNI. Voy a guardarlo dentro de una variable llamada lienzo. Entonces crea la variable con el nombre del lienzo, y voy a agarrar el ID de mi lienzo seleccionando el document.getElementById. Tan solo asegúrate de que los elementos, by, y ID tengan pareja menos. El elemento que vamos a agarrar es mi lienzo. Entonces dentro de corchetes, luego dentro de las citas escribe en myCanvas, luego terminaremos con un punto y coma. Esta sección está agarrando el lienzo por el ID, y luego almacenando dentro de una variable llamada canvas. Voy a crear una variable más llamada ctx, esto es abreviatura de contexto. Esto se debe a que vamos a estar accediendo al contexto de renderizado del lienzo, y esto nos permite realmente dibujar al lienzo. Hacemos esto llamando al método de lienzos getContext. Dentro de esta variable, vamos a seleccionar el lienzo, que se crea, y luego punto, y luego llamar a getContext, seguido de los corchetes, y un punto y coma. En este curso estaremos concentrándonos en gráficos 2D. Entonces dentro de los corchetes como parámetro, vamos a agregar 2D dentro de ahí, y esto especificará que queremos crear un contexto de renderizado bidimensional. Estaré usando mucho una variable ctx a lo largo del curso. Ahora que tenemos el contexto o la variable ctx, ahora podemos usar esto para acceder a las propiedades del dibujo mediante su uso. Voy a eliminar las propiedades de estilo para agregarlo en el último video, y las voy a agregar en varios scripting. Agarra la variable ctx, y luego vamos a usar el método FillStyle con una S mayúscula, y el estilo va a ser el color que queremos establecer. Este es un color CSS, así que quiero llamarlo rojo. Podemos usar el nombre del color, o podemos usar el valor x, o incluso puedes usar gradientes, o juegos de palabras, que veremos más adelante en el curso. En realidad usemos este color, y llenemos rectángulo. Nuevamente, necesitamos usar el punto de contexto, y esta vez FillRect, que por supuesto es un rectángulo. Ahora dentro de los corchetes del método FullRect, vamos a sumar cuatro parámetros diferentes. Yo sólo voy a sumar 0, 0, 300, 300. Los dos primeros parámetros, el cero y el cero, es la posición en la que quisiéramos iniciar el rectángulo en el lienzo. Entonces 0 x y 0 y, los dos primeros valores, es la esquina superior izquierda del lienzo. Veremos más en las coordenadas en el siguiente video, pero por ahora, sólo necesitamos saber que la posición 0, 0, es una coordenada a la esquina superior izquierda, y entonces probablemente ya has adivinado que el 300, 300, es el ancho y la altura del rectángulo. Hemos creado un rectángulo del mismo tamaño que el lienzo, y en lugar de coordenadas duras con un valor particular, también podemos usar JavaScript para que coincidan con el mismo ancho y la misma altura que el lienzo. Cambiamos esto para que sea lienzo, y este es el lieno.width, y hacemos lo mismo con alturas. Entonces lieno.altura, y luego deberíamos conseguir que el rectángulo aparezca exactamente como era antes. Ahora solo voy a crear uno o dos rectángulos o cuadrados más solo para jugar. Vamos a agarrar el contexto, y de nuevo, agarrar el método FillStyle. Quiero establecer esta vez para que sea un valor hexagonal, así que usa el hashtag, y voy a usar 00ff99. Este estilo en realidad no hace nada hasta que realmente creamos un rectángulo. Por lo que CTX.FillRect. Al igual que antes, empezaremos esto en la esquina superior izquierda. Entonces 0, 0, y esta vez queremos que sea la mitad del ancho, y la mitad de la altura del lienzo. Usando JavaScript, podemos hacerlo de nuevo. lugar de lienzo, el ancho que obtuvimos en el último ejemplo, vamos a usar lieno.width sobre dos, y luego lo mismo para las alturas, lieno.altura sobre dos, o dividido por dos. Eso debería hacer un bonito cuadrado aquí arriba en la esquina superior izquierda, que es la mitad del peso y la mitad de la altura del lienzo original. Añadamos uno más, solo en una posición ligeramente diferente. Llenemos estilo la otra vez, esta vez con un color diferente. Escogeré cc99ff, y luego llenaré rectángulo. Esta vez queremos configurarlo para que sea de 150 píxeles, y esta es la posición inicial en el centro de la plaza porque es la mitad del ancho y la mitad de la altura del lienzo. Lo haré del mismo tamaño que antes, lo que el ancho del lienzo se divide por dos, lieno.altura se divide por dos, porque tenemos bonitas sartenes abajo para fusionar en el navegador. Esto está bien si realmente quieres llenar el rectángulo como lo hemos hecho con un color especificado, pero si una vez realmente solo para dibujar un rectángulo mostrando solo el contorno sin color de relleno, podemos hacerlo usando el método StrokeReect. De nuevo, empecemos con ctx, y luego usamos StrokeReect. Dibujemos el exterior o el contorno de un rectángulo. Así que haz esta posición de tiempo 25, 25, y que lo hará un bonito cuadrado simple 100 por 100. Ahí podemos ver tenemos el rectángulo o el contorno de cuadrados. Por supuesto, la única diferencia entre dibujar un cuadrado o un rectángulo usando FullRect y StrokeRect, es simplemente el ancho y la altura que especificamos dentro del paréntesis. Por lo que podríamos cambiar fácilmente esto para que sea un poco más ancho, y luego convertir el cuadrado en un rectángulo. Eso es todo. Espero que hayas disfrutado de tu primer sabor de scripting usando el lienzo, y cómo dibujar rectángulos, y cuadrados. No siéntete libre de tener un poco de juego con eso, y te veré en el siguiente video. 5. Conceptos básicos de Canvas: Entender las coordenadas del lienzo de Canvas: En el último video, dibujaremos algunos rectángulos y algunos cuadrados sobre el Lienzo. Te introdujeron algunas coordenadas básicas de Canvas. Solo queremos tomarnos unos momentos ahora solo para mirar las coordenadas de Canvas con más detalle. Entender cómo funcionan las coordenadas realmente te ayudará a medida que avanzas por este curso. Ya sabes que 0,0 es la esquina superior izquierda del Lienzo. Si nos imaginamos que esta cuadrícula es el Lienzo y cada pequeño cuadrado contenido dentro de la cuadrícula es de un píxel. Porque estamos usando el contexto 2D, tenemos tanto el eje x como el eje y. El eje x corre horizontalmente a través del lienzo, mientras que el y corre verticalmente. Tendremos la posición 0, 0 en la esquina superior izquierda representada por el pequeño punto. A medida que se incrementa el valor x, corremos a través del lienzo horizontalmente. Si atravesamos cuatro píxeles, estos son los puntos de partida del cuadrado, lo que x es igual a cuatro. Porque los puntos de partida de la plaza están a sólo un píxel de arriba. Esto hace que el valor y sea igual a uno. Es justo lo mismo que miramos en el último video, donde fijamos la posición 0, 0 del primer rectángulo. Después establecemos el segundo rectángulo, o el segundo cuadrado para comenzar en el centro del Lienzo para crear un cuadrado en la esquina inferior derecha. Establecemos la posición x e y en 150 por 150, que estaba exactamente a mitad de camino en medio del Lienzo. Poder conseguir que tu mano alrededor de estas coordenadas desde una etapa temprana realmente te ayudará a medida que avanzas por el curso. Realmente vale la pena saber que particularmente el eje en geometría tradicional y en diversas industrias diferentes, un valor positivo y, realidad aumentaría al alza. En tanto que en el Canvas, todos los valores positivos para y van verticalmente por el Canvas. Si vienes de un fondo particular donde las coordenadas se hacen de una manera diferente, solo ten cuidado con eso. Esperanza eso tiene sentido. Ahora pasaremos a crear más dibujos. 6. Conceptos básicos de Canvas: Líneas y recorridos: En este video, vamos a echar un vistazo a las líneas y caminos que podemos hacer usando el lienzo HTML. Empecemos por fork en el último video, y cambiaré el nombre para que sea simplemente líneas y caminos, son lo mismo con el título. Entonces vamos a eliminar todo entre etiquetas de script excepto las dos primeras variables que creamos. Vamos a necesitar estos en todos los videos que hacemos, podemos dejarlos como están. Empecemos con un simple ejemplo de cómo dibujar algunas líneas y lo haremos creando un cuadrado, dibujando los cuatro lados individualmente. Nuevamente, trabajemos con el contexto, así que ctx.. Vamos a empezar por usar el método BeginPath, y solo necesitamos dejar vacíos los paréntesis en esto, esto solo especifica el inicio de un nuevo camino. Ahora antes de empezar a dibujar justo antes de empezar a añadir el cuadrado, sólo voy a añadir un borde para que podamos ver el contorno del lienzo. Establezcamos el estilo para que sea igual al borde, y hagámoslo 2 píxeles para que podamos verlo en una línea sólida. Vamos a tener nuestro lienzo de vuelta, vuelta a ti BeginPath y luego CTX.MoveTo. Esta va a ser nuestra posición de partida de la que queremos trazar nuestra línea. Quiero establecer el lápiz para que sea de 10 píxeles en en el eje x, y también de 10 píxeles en o 10 píxeles hacia abajo en el eje y. Esto efectivamente moverá la pluma a algún lugar por aquí, y esta será nuestra posición inicial. Después para dibujar realmente una línea, usamos CTX.lineto, y luego necesitamos agregar nuestras dos coordenadas que querremos trazar la línea entre. El primero que vamos a sumar es el eje x de 290, y el eje y de 10. Te das cuenta de que nada ha aparecido en la pantalla aún, esto se debe a que para que esto realmente dibuje de la misma manera que el video de los rectángulos donde tuvimos que usar stroke and fill, necesitamos hacer lo mismo para la línea. CTX.strok, esto acariciará el contorno. La línea comienza en la posición x-10, y-10, elegimos 10 píxeles en, y luego moveremos 290 o moveremos a la posición 290 que está aquí y también mantendremos esa posición de 10 píxeles en el eje y. Sigamos ahora con una segunda línea 2 CTX.Lineto. Queremos mantener la pluma cruzada en 290, mantengámosla ahí, pero queremos dejarla caer en el eje y hasta 290. Voy a obtener una línea vertical recta, y ojalá pueda ver un margen de patrón, CTX.Lineto. Ahora necesitamos volver a la primera posición x, que era de 10 y mantener el eje y en 290. A la tercera línea, vamos a terminar esto volviendo a la posición 10, 10. Este es nuestro punto de partida y luego creamos una plaza completa. Devolver la línea a las coordenadas originales es una forma de completar la plaza, hay una forma mucho más fácil de hacerlo. Comentemos esta línea con dos listones delanteros, esta línea no será roja. En lugar de esto, debido a que usamos el método BeginPath al inicio, podemos encerrar un path off usando CTX.ClosePath. Entonces esto volverá ahora a la posición inicial original y completará la plaza. Es así como dibujamos un cuadrado usando trazo. Si querías que los cuadrados tuvieran un relleno de color, podemos cambiar ctx para ser relleno, y luego obtendremos el color relleno con el negro predeterminado. Podemos cambiar el color predeterminado para que sea cualquier cosa que queramos usando el método de estilo de relleno como usamos para los rectángulos. Sigamos dibujando algunas formas más nuevas, dibujemos un triángulo. Empecemos por crear un nuevo camino. Empezaré el camino del triángulo y luego moveré la pluma a la posición inicial. Para tener esto dentro de la plaza por 10 píxeles más tendremos la posición inicial esta vez establecida en 20, 20, y vamos a crear las primeras líneas, CTX.Lineto. Para hacer que la primera línea pase por la parte superior para el inicio del triángulo, necesitamos hacer la posición 10 píxeles por cada cruz. Esto fue 300 para el contorno del lienzo, 290 para el borde de la plaza. Vamos a traer 10 píxeles más y hacer este 280, y la posición Y puede permanecer en 20. Entonces para hacer de esto un triángulo igual, necesitamos moverlo hacia abajo a la posición 20 en el eje x, y un valor Y para hacerlo igual a 280 que es básicamente lo contrario a éste ctx.Lineto, el valor X de 20, el valor Y de 280. Después para volver a la parte superior, simplemente cerremos el camino usando CTX.ClosePath, y luego para que aparezca esto, vamos a agregar ctx.fill. En realidad no vemos aparecer el triángulo en el lienzo. Esto se debe a que el color de relleno predeterminado que mencionamos antes es también el negro, que se está mezclando con el mismo color que el cuadrado. Antes de llenarlo, podemos agregar un FillStyle, y vamos a configurar el color para que sea valor hexagonal de nuevo de 99ccff. Podemos ver el triángulo destacando de fondo. Añadamos un triángulo más, pero esta vez añadiremos un trazo en lugar de un relleno. Sólo voy a copiar este triángulo y sólo a añadir esto a continuación. Por supuesto en lugar de ctx.fill, usaremos stroke. Cambiemos el FillStyle para que sea rojo, solo para que podamos ver en el fondo azul. Vamos a compensarlo desde el primer triángulo, vamos a configurarlo para que sea la posición inicial de 40, 40. Todos los 20s se pueden cambiar a 40, y para hacerlo igual cambiaremos 280 para ser 230, y deberíamos hacer un bonito triángulo parejo. De hecho esto quiere ser StrokStyle, porque estás usando un trazo en lugar de un relleno. Entonces ese es nuestro color rojo para el contorno. Justo antes de terminar este video, solo quiero mostrarte algunos métodos diferentes para guiones de línea, son setLineDash y getLineDash. Para utilizar el setLineDash podemos agregar esto al último triángulo. Simplemente lo voy a agregar antes de las líneas que realmente he dibujado, solo agreguemos esto debajo de BeginPath. Vamos a utilizar de nuevo la variable de contexto, así que ctx, esto es setLineDash. Asegúrate de usar mayúsculas para cada palabra aparte de la primera. Entonces necesitamos agregar algunos valores dentro del paréntesis, necesitamos realmente agregar una matriz. vamos a usar con los corchetes, abre los corchetes así como así. Para empezar con un simple LineDash, voy a agregar dos valores diferentes, 10 agregar 10. Eso hace una simple LineDash que tiene 10 píxeles de ancho. Que se establece por el primer valor, y luego un espacio de 10 píxeles entre cada una de las líneas. Si quieres que estas líneas estén más separadas podemos cambiar el segundo valor, así como eso. Estos valores son sólo bucle a través hasta que llega al final de la línea. Podemos agregar más de dos valores, podemos agregar un número impar. Si cambiamos esto para ser 10, 20, 30, el valor de tres simplemente bucle hasta el final de la línea. Echemos un vistazo a los guiones de línea. Podemos ver si empezamos aquí, hay una primera línea de 10 píxeles, una brecha de 20 píxeles, luego una tercera línea de 30 píxeles. Después de volver a la salida, tenemos una brecha de 10, una línea de 20, y una brecha de 30, son 10, 20, 30 de nuevo, y así sucesivamente hasta derecha de vuelta a la salida. Por último, solo quiero mostrarte rápidamente GetLineDash. GetLineDash es algo para lo que puede que nunca tengas ningún uso, pero te mostraré cómo usarlo por si acaso. Debajo del setLineDash, voy a crear una nueva variable, y esta variable va a comenzar en los detalles de la LineDash. Solo voy a llamarlo algo relevante como LineDashPattern, y luego cuando configuro esto para que sea contexto. y el método que necesitamos usar en lugar de setLineDash es getLineDash. Empezaré dentro de esta variable, abramos la consola y hagamos un registro de consola, console.log y luego lo que queremos iniciar es esta variable. Añadamos eso dentro ahí, y luego voy a abrir la consola que está justo en la parte inferior ahí, haga clic en eso. Ahí está nuestra matriz de los valores de retorno para el LineDash. Tenemos 10, 20, 30, y luego se repite. De nuevo, eso es algo que tal vez nunca necesites pero está ahí por si acaso lo necesitas. Gracias, y nos vemos en el siguiente video. 7. Conceptos básicos de Canvas: Anchura de las líneas y correspondencia con los píxeles: Bienvenido de nuevo. En este video, te voy a mostrar cómo cambiar el ancho de la línea, o el grosor de las líneas. También voy a echar un vistazo al importante concepto de mucho en píxeles. Para empezar, sólo bifurcaremos el último video, que fue líneas y caminos. Entonces una vez hecho eso, cambiaremos el nombre. Anchos de línea y coincidencia con píxeles, solo voy a copiar eso, y pegar eso en el título, así como así. Entonces podríamos quitar algunas de las partes innecesarias del guión que no necesitamos. Para este video, no necesitamos la plaza original, así que eliminaré la primera sección. También podemos quitar el primer triángulo. Dejaremos el tercer triángulo, pero solo eliminaremos los guiones de línea. Por lo tanto, elimine la línea establecida, la línea discontinua, la variable, y también el registro de la consola. Entonces estamos bien para irnos. Guarda eso. Simplemente debemos quedarnos con un contorno del triángulo rojo. Ha cambiado el ancho de una línea de trazo, es bastante sencillo de hacer. Necesitamos usar ctx, el método que usamos es lineWidding. Voy a establecer un valor, digamos a un valor inicial de uno, y a ver qué pasa. No obtenemos ninguna diferencia, así que intentemos aumentar esto a 10, y ver qué pasa. También obtenemos una línea mucho más grande, o una línea mucho más amplia, de la que teníamos antes. Lo haremos aún más visible, así que aumentemos a 26. Eso es más o menos, todo lo que necesitamos hacer para cambiar el ancho de la línea. Realmente es así de sencillo. Pero un concepto más importante, que es un poco más complicado de comprender, está mucho en píxeles. A veces no hacemos mucho a los píxeles correctamente, podemos terminar con líneas borrosas. Sólo para mostrarte un ejemplo, voy a copiar este triángulo que acabamos de usar, y luego pegar en un segundo triángulo. Pero esta vez vamos a cambiar el ancho de línea para que sea un valor impar de 25. Tan sólo para compensar el triángulo para que podamos ver la diferencia, cambiar todos los 40s a 80s, y todos los valores de 230 a ser 270. Entonces guarde eso. Ahora tenemos que compensar los triángulos. Uno tiene un ancho de 26 píxeles, y uno es 25. Solo para mostrarte lo que quiero decir, solo voy a acercar, en el navegador, y espero que puedas ver esto en casa. De no ser así, debería ser un poco más fácil de ver en tu propia computadora. El segundo triángulo que acabamos de crear, tiene un contorno borroso. El primero, que hemos dibujado tiene un contorno nítido y nítido. Echemos un vistazo a por qué es esto. Para ayudarte a entender exactamente por qué está sucediendo esto, me gustaría echar un vistazo a los dos ejemplos. El primero del lado izquierdo, es una cuadrícula Lienzo directa, con una línea verde, la línea verde tiene un píxel de ancho. Esto se dibuja en el eje x, de siete píxeles de ancho. En la línea roja se indica el centro de la línea. Partiendo de cero, si atravesamos siete píxeles, fueron llevados justo al centro de la línea verde que hemos trazado. Debido a que la línea verde tiene sólo un píxel de ancho, el Canvas lo dibuja medio píxel a la izquierda, y luego medio píxel a la derecha. Como puedes ver, esto no llena un píxel entero, si miramos las cuadrículas cuadradas en el fondo. Entonces lo que pasa es que el lienzo luego dibuja o rellena, el resto del píxel con un tono parcial. Este es el efecto borroso que puedes ver en el ejemplo anterior. Todo lo que necesitamos hacer para que la línea sea mucho el píxel, es echar un vistazo al ejemplo de la derecha. En lugar de la posición inicial para estar a las siete, cambiamos para ser 6.5. Verticalmente la línea central está a mitad de camino entre píxel, y esto luego provoca que el ancho de línea ocupe el tamaño completo del píxel, y por lo tanto, no se necesita ningún sombreado adicional como este ejemplo. Por lo tanto tenemos líneas afiladas, ningún efecto borroso en el exterior. Algo así en lo que quería que pensaran, y que estuvieran al tanto, cuando dibujaran líneas o formas en el Lienzo. Gracias y adiós por ahora. 8. Conceptos básicos de Canvas: Esquinas y ángulos: Este video es todo sobre esquinas y miters. Vamos a crear un nuevo Pen para este video por [inaudible] el último. Entonces como de costumbre, sólo cambia el título para que sea esquinas y miters y lo mismo dentro del título HTML. Vamos a crear un poco más de espacio. Entonces para este ejemplo, solo voy a dejar el primer triángulo del último video para luego deshacerme del segundo. Ahí vamos. El triángulo que tenemos en la pantalla tiene esquinas agudas. Podemos cambiar esto mediante el uso de diversas propiedades. Podemos agregar esquinas redondeadas en esquinas biseladas, así como estas esquinas inglete las cuales puedes ver por defecto. El modo de hacerlo es usar el context.LineJoin, y luego podemos establecer el tipo de unión que queremos utilizar para cada una de las esquinas. El primero que voy a añadir es redondo, y luego guarde eso. Podemos ver que los bordes en las esquinas libres del triángulo ahora tienen un borde redondeado mucho más suave para ellos. También podemos cambiar las esquinas redondeadas para que sean un bisel. Esto agrega mucho más de un efecto cuadrado a cada uno de los tres lados. El tercer inmueble, que podemos agregar es el inglete, y el inglete son los valores por defecto con los que empezamos. Esto en realidad no hará ningún cambio con respecto al triángulo original, acabamos de quedar con las tres esquinas agudas. Si el efecto inglete es lo que estás buscando, no es necesario agregar esta línea en absoluto como su valor predeterminado. Eso son tres estilos que puedes agregar a las esquinas. A continuación, quiero mostrarte cómo usar LineCap. LineCap es una técnica que se puede utilizar para cambiar el estilo de los extremos de la línea. Para demostrarlo, sólo voy a quitar las dos últimas líneas del triángulo. Simplemente haz eso en línea recta. Entonces podemos cambiar LineJoin para ser LineCap. El valor predeterminado es el tope y esto son sólo los bordes cuadrados que vemos en una línea estándar. Se cuadra cada uno de los extremos y es el estilo predeterminado si no se especifica nada más. También podemos cambiar estos para que sean redondos, igual que con el ejemplo de triángulo, que acabamos de ver. Tenemos una bonita esquina redondeada en cada uno de los extremos de la línea. Ahora, la última es la plaza. Al usar un cuadrado, puede que no notes mucha diferencia y en realidad se ve bastante similar al trasero que acabamos de ver antes, que es el predeterminado. No obstante, al usar el cuadrado, en realidad hace que la línea sea un poco más larga porque se agrega un cuadrado a cada extremo de la línea. El cuadrado se extiende la mitad del ancho de la línea, por lo que la hace un poco más larga en cada extremo. Es sólo una diferencia sutil, pero vale la pena tener en cuenta si necesitas tener control sobre la longitud de la línea. Es así como usas LineJoin y también LineCap. La tercera y última técnica a la que queremos echar un vistazo en este video, es cómo utilizar el MiterLimit. Echemos un vistazo a algunas diapositivas para conseguir una mejor comprensión. He creado un boceto para darte una mejor comprensión del MiterLimit antes de que realmente nos metamos en cualquier código. Delante de ti hay dos esquinas diferentes con ángulos diferentes. Como puedes ver, estos diferentes ángulos crean una longitud diferente de inglete. Desde los puntos interiores hasta los puntos exteriores, la longitud es mucho más ancha en este ejemplo que sobre a la izquierda. En realidad podemos tener control de la longitud de este inglete mediante el uso del MiterLimit. Podemos controlar la longitud del inglete si queremos mediante el uso de MiterLimit. Si la longitud del inglete es más larga que el MiterLimit, que establecemos, la esquina, como se puede ver en el ejemplo correcto, se biselará o efectivamente se cortará. Podemos usar esto para ganar control sobre la longitud de nuestros miters. Volvamos a CodePen y pongamos esto en práctica. Para este ejemplo, solo necesitamos agregar otra línea. Simplemente haz esto en una esquina, así que crea un LineTo. Voy a hacer esto 30,100. Debería jugar alrededor de estos para conseguir un rincón agradable. Voy a hacer eso 250 y 70. Simplemente cambiaré la x e y para que la pluma se mueva a 30 y 30. Ahora, hagamos que el ancho de línea sea un poco más pequeño, cambiemos eso para ser 10. Podemos ver el ángulo completo o la esquina completa ahora en pantalla. Tampoco necesitamos el LineCap del ejemplo anterior. De acuerdo, lo primero que tenemos que hacer es establecer el LineJoin para que sea el tipo de inglete. Añadamos eso aquí ahora. LineJoin es igual a inglete, entonces podemos agregar el MiterLimit justo debajo. Simplemente vamos a empezar con el valor de 10. 10 es en realidad el valor predeterminado. No notarás ninguna diferencia estableciendo esto en 10. Tenemos un largo filo afilado ahí, tenemos una esquina afilada. Sólo intentemos reducir esto a cinco y ver qué pasa. El valor de 5 es menor que la longitud de la esquina, por lo que ahora se ha establecido esto para que sea un extremo biselado. Podemos usar esto para restringir la nitidez de una esquina. Es así como podemos usar esquinas e inglete con el lienzo. Pasaremos ahora al siguiente video donde echaremos un vistazo a los arcos y círculos. 9. Conceptos básicos de Canvas: Arcos y círculos: Pasando desde las esquinas y miters desde el último video, ahora vamos a echar un vistazo a los arcos y círculos. Vamos a crear un nuevo CodePen para esto. Entonces bifurque el último video, entonces vamos a crear un título de arcos y círculos. Voy a leer todo el guión excepto el lienzo y las variables de contexto, así que empezaremos de nuevo dentro de eso. Antes de empezar a escribir cualquier código, echemos un vistazo a algunas diapositivas para tener una mejor comprensión de cómo usar arc. Este es el método de arco y toma en diversos parámetros. Para empezar, tenemos las propiedades X e Y y estas son centro del arco. Entonces justo en medio del arco o del círculo que queremos crear. El tercer inmueble es el radio por lo que el radio es la distancia desde el centro hasta el exterior del círculo. Después tenemos el ángulo de inicio y el ángulo final. Tenemos que entender que el arco utiliza radianes en lugar de grados. Por lo que sólo horizontal o el eje X, esta es la posición de inicio o cero. Esto es efectivamente a las tres en punto. Después una cuarta parte del camino, esto será 0.5 veces pi. La mitad de camino sería una vez pi, 1.5 y luego dos veces pi sería una rotación completa o un círculo completo. El último parámetro es donde queremos que el arco se dibuje en sentido horario o antihorario. Se trata de un valor booleano que se establece en verdadero o falso. Entonces, por defecto, está configurado en el sentido de las agujas del reloj. Si establecemos que eso sea cierto, podríamos entonces cambiar esto para que sea en sentido contrario a las agujas del reloj. Para este ejemplo, el ángulo de inicio sería cero. Nos gustaría que fuera en sentido contrario a las agujas del reloj todo el camino redondo a 0.5. veces pi para el ángulo final. Si sí quieres averiguar qué son los radianes en relación a los grados, hay algunas calculadoras en línea, así que solo dale a eso un google rápido y podrás encontrar lo que necesitas. Ahora volvamos a CodePen y echemos un vistazo a algunos ejemplos. Empecemos por crear nuestro primer arco. Voy a empezar un camino para empezar. Entonces vamos a crear el arco, así ctx.arc. Agregamos los parámetros dentro de los corchetes, tal como miramos antes en las diapositivas. Los dos primeros valores es el centro del arco. Voy a hacer mi centro interior del lienzo. Entonces 150,150 entonces el radio voy a hacer el mío 80. El puesto de partida, el mío se va a poner a cero. Entonces el ángulo final, voy a hacer el mío una vez math.pi. acabó la posición inicial del cero en la posición de las tres en punto. Tenemos la posición de meta para ser una vez math.pi, que se termina en la posición de las nueve en punto. Para dibujar esto, solo necesitamos agregar el trazo o el relleno. Entonces ctx. trazo solo para darnos el contorno, así que ahí estamos porque esto es por defecto en el sentido de las agujas del reloj. Va dando vueltas en el sentido de las agujas del reloj. Si queremos que esto sea al revés, podemos cambiarlo para que sea verdad. Después tendremos el arco que va redondo en sentido contrario a las agujas del reloj. También podemos llenar la sección del arco mediante el uso de ctx.fill. Hay un negro por defecto el cual hemos visto en videos anteriores. Por supuesto que podemos cambiar el estilo de relleno, si eso es algo que quieres hacer. Si queremos crear el círculo completo, como miramos previamente, solo necesitamos cambiar el ángulo final para que sea dos veces pi y eso crea un círculo completo. Estoy tratando de volver a cambiarlo por ahora. A continuación voy a echar un vistazo a ArcTo y ArcTo pueden ser un poco más difíciles de entender. Echemos un vistazo a un buen ejemplo que encontré en línea. Esto está disponible en rgraph.net. Si realiza una búsqueda de rgraph y también la función ArcTo, debería poder encontrar este ejemplo interactivo. Para entender ArcTo, necesitamos estar conscientes de que hay algo más que un ángulo de inicio y final. Empezamos con el P0, que está justo abajo en la esquina inferior izquierda. Podemos mover esto si queremos. Empezaremos configurando P0, que es la posición de inicio, mediante el uso de MoveTo. Después establecemos el valor de P1, que es un punto donde se encuentran estas dos líneas. P2 es entonces la posición final. Después usamos LineTo para continuar con la línea verticalmente hasta el punto final. Este es un gran ejemplo porque podemos mover cualquiera de estos puntos y obtenemos una mejor comprensión de cómo funciona todo. Volvamos a CodePen y creemos un ejemplo para nosotros mismos. Todavía dentro de las etiquetas de script, vamos a crear un nuevo Path. Empecemos el Sendero. Justo debajo del último ejemplo. De hecho, crearemos un poco más de espacio con el que jugar así que hagamos que el ancho sea 600 solo para que podamos apretar los dos puestos. Nosotros vamos a puff. Entonces lo primero que tenemos que hacer es crear un punto de partida así CTX.MoveTo. El puesto en el que vamos a empezar es X, 300 y luego Y, 150 así que crea un punto de partida, que efectivamente es P0. Entonces voy a continuar la línea con un LineTo. El punto que me gustaría establecer el LineTo es de 400,150. Añadamos el trazo para que podamos ver las líneas mientras las estamos dibujando. Ahí está nuestra posición de inicio.Ahora movemos la línea a través de 100 píxeles. Tenemos LineTo. Entonces vamos a crear el método ArcTo. Vamos a crear las coordenadas, que es para P1, que está justo aquí arriba. Voy a poner el mío en 500,150 para que esto luego crea la posición imaginaria P1. Entonces porque queremos que la línea se redondee y se mueva hacia abajo en el eje Y, vamos a hacer que sea 500, luego bajar a 300 y luego un radio de 75. Después para extender la línea derecha hacia abajo hasta la posición de meta, que es de 500,300 entonces sólo se extiende la línea con una LineTo de 500,300 y ahí está nuestro ArcTo completo. Sólo para recapitular, hemos pasado a la posición 300,150, que está aquí. Después hemos creado una línea, 100 píxeles [inaudibles] a través de la cual toma una línea a través horizontalmente. Después hemos creado el ArcTo por lo que el primer valor de 500,150 es la posición imaginaria P1, que está aquí. Entonces porque queremos que el arco luego se curva redondeando, luego bajaremos el valor Y para que sea 300 y 500,300 es la posición de meta, que está aquí abajo. Después extendimos la línea para ser recta hacia abajo hasta la posición de meta creando el arco completo. Espero que eso tenga sentido. Probablemente juegue con los valores y vea lo que puede crear. También hacer un poco de juego con el ejemplo interactivo. Es así como podemos agregar arcos y círculos al lienzo. Si vuelves en el siguiente video, echaremos un vistazo al texto de dibujo. 10. Conceptos básicos de Canvas: Añadir texto en el lienzo: En este video, vamos a pasar de dibujar realmente formas y líneas, y te voy a mostrar cómo agregar texto al lienzo, y cómo agregar varios estilos y efectos para que tu texto realmente destaque. He seguido adelante y copiado el último video y he creado una pluma de código de texto para agregar, y luego despejé la sección de guión, dejando el lienzo y las variables de contexto. El modo de agregar texto al lienzo es usando FillText y también StrokeText, y deberías poder adivinar qué hacen esos dos de videos anteriores. El StrokeText dibuja el contorno, y FillText dibuja el texto con un relleno de color. Vamos a empezar por usar FillText. Entonces CTX.FillText, y luego los corchetes después de eso. El primer inmueble que necesitamos agregar es el texto que queremos mostrar. Solo voy a agregar algo de texto de agregar texto de lienzo. Después las coordenadas de inicio de 0, 0. Notamos que si miramos el lienzo del lado derecho, realidad no podemos ver ninguno de los textos que acabamos de dibujar. Esto se debe a que las coordenadas de texto de 0, 0 están en realidad en la parte inferior izquierda del texto. Para moverlo hacia abajo para que podamos verlo en la pantalla, vamos a cambiar el valor y para que sea 50. Ahora apenas podemos verlo aparecer en la pantalla de ahí. Para hacerlo un poco más grande, podemos agregar algunos estilos de fuente, ctx.font. Establezcamos la fuente para que sea igual a 50 píxeles para que sea más grande, y también el tipo de fuente para que sea Helvetica. De hecho, para que esto funcione, solo necesitamos colocar esto justo antes del FillText, y eso debería hacer que el texto sea más grande ahora. Ahí vamos. Eso es mucho más grande ahora, y hemos cambiado la fuente. El tamaño predeterminado es de 10 píxeles, y es una fuente sans-serif. Ahora, vamos a darle un poco de color. Añadamos un FillStyle, CTX.FillStyle. Para que sea sencillo, solo voy a añadir un nombre de color de morado. Entonces vamos a empujar el texto en el centro del lienzo mediante el uso de TextAlign. Pondré esto para estar en el centro. De acuerdo, eso no es exactamente lo que estamos buscando. Si queríamos que el texto apareciera en el centro del lienzo, necesitamos cambiar la posición inicial en el método FillText. Actualmente el texto se está centrando sobre las coordenadas cero, que está por aquí. Empujemos eso en el medio del lienzo. Vamos a añadir lieno.ancho más de 2. El texto es referenciado desde la mitad del lienzo. lo mismo para este valor, cambiemos 50 para que sea la altura del lienzo dividida por 2, y esa es la línea de base del texto para estar al otro lado del centro del lienzo. Está bien. A continuación vamos a echar un vistazo a la línea base de texto. Antes de mirar eso, solo quiero trazar una línea justo al otro lado del centro del lienzo, y verás por qué en tan solo un momento. Vamos a crear rápidamente una línea. Pasar a 0 lieno.altura dividida por 2. Dibujemos la línea. El là nea va a ser el ancho del lienzo, y luego la posición y va a ser lieno.altura dividida por 2. Dibujemos la línea con el trazo. De acuerdo, ahora tenemos una línea apareciendo a través del centro del lienzo, y verás por qué en tan solo un momento. Yo sólo voy a mover el texto justo al fondo de ahí. Empecemos a jugar con la línea base del texto. Debajo de ahí, solo voy a agregar CTX.TextBaseline. Tal como está actualmente, tenemos el texto también muy bien en la línea con las colas colgando por debajo de la línea imaginaria. Cambiemos esto cambiando el TextBaseline para que sea inferior, y veamos qué sucede. Eso empuja efectivamente el texto hacia arriba. Cada letra o cada parte de cada letra descansa ahora en la línea de base. Hay bastantes opciones diferentes que tenemos que mirar la línea base, también podemos usar top, y esto empuja todo por debajo de la línea base. También podemos usar medio, y esto suma la línea de base para estar a través del medio del texto. También hay alfabético. Esto nos trae de vuelta al inicio, ya que este es el valor por defecto. El último que te voy a mostrar está colgado. Al usar colgar, en realidad se ve un poco como cuando se usa top. No obstante, no hay brecha entre la parte superior de las letras y la línea de base. Efectivamente solo están colgando de la línea de base ahí. Al usar el método FillText, en realidad hay un parámetro más que podemos agregar, y este es un valor opcional. Esto establece el ancho máximo, que podemos usar para restringir el texto a un cierto tamaño. A modo de ejemplo, solo voy a restringir el texto para que tenga 200 píxeles de ancho. Se puede ver que aprieta el texto hacia arriba. Vamos a cambiarlo a 300, eso lo hace un poco más ancho. Eso es útil si queremos mantener los límites del texto dentro de cierto contenedor. Por supuesto, al igual que cuando se usan todas las formas de videos anteriores, en lugar de usar relleno, podemos cambiar esto para que sea trazo, o texto de trazo. Entonces solo obtenemos el contorno del texto en lugar de un color de relleno sólido. Es así como podemos agregar texto al lienzo, y cómo podemos agregar estilo a nuestro texto. Ahora pasemos al siguiente video. Echaremos un vistazo a quitar secciones del lienzo. 11. Conceptos básicos de Canvas: Eliminar secciones del lienzo: Bienvenidos de vuelta chicos. Este video se llama Eliminar secciones de El lienzo. Voy a echar un vistazo a un par de métodos diferentes para ambas secciones de encubrimiento del Canvas, y también eliminar por completo los píxeles que se habían dibujado a ciertas áreas del Canvas. Pero echemos un vistazo a cómo recortar un área del Lienzo para restringir el dibujo a cierta forma. He ido adelante y bifurcación el último video y he puesto el título a quitar secciones del Lienzo. Ahora voy a eliminar todo el scripting como de costumbre excepto el Canvas y las variables de contexto. Entonces, por último, voy a cambiar el estilo al fondo, y pongamos que sea rojo. Ya verás por qué en tan solo un momento. Usando lo que ya sabemos, podemos crear el efecto de eliminar secciones del Lienzo con solo agregar una forma como un rectángulo con un color de fondo como el blanco. Hagámoslo ahora. En primer lugar, establece el estilo de relleno del rectángulo, y voy a hacer ese blanco. Entonces vamos a crear el propio rectángulo con FillRect. Voy a crear la mía en la esquina superior izquierda. Tan cero-cero para la posición inicial, un ancho de la mitad del Lienzo, que es de 300, y luego quiero establecer la altura para que vuelva a ser la mitad del Lienzo, de 150. Después obtenemos un rectángulo blanco en la esquina superior, lo que da de la ilusión de que parte del Lienzo se ha quitado. No obstante, esto solo está cubriendo el objeto que se está dibujando en lugar de eliminar realmente cualquier píxel. Si quisiéramos realmente eliminar cualquier píxel dentro de un área determinada que ya se ha dibujado, podemos hacerlo usando el método ClearRect, y esto realmente elimina todos los píxeles dentro de un área determinada. Echemos un vistazo a eso. Si quisiéramos quitar parte del rectángulo que acabamos de dibujar, podríamos usar CTX.ClearRect, y los parámetros funcionan de la misma manera que el FillRect. Empezamos con la posición con la que queremos empezar, que en mi caso es cero-cero. Yo sólo voy a crear un cuadrado 100 por 100 para quitar, que se puede ver es apenas la esquina superior. Esto ha eliminado los píxeles que se han dibujado dentro de esta sección de 100 por 100. Por supuesto, si quieres despejar todo el Lienzo, simplemente puedes añadir lieno.width y también lieno.height. Esto seleccionará toda el área del Lienzo y borrará todos los píxeles que se le han dibujado. Simplemente pondré un comando frente a esto sólo para recuperar nuestro triángulo blanco. El último método que quiero mostrarte es clip. Si alguna vez has usado una máscara de recorte en software de edición de fotos como Photoshop, clip funciona con los mismos efectos. Declaramos una sección que queremos recortar como un rectángulo o un círculo entonces cualquier otra cosa que dibujemos en el Lienzo sólo será visible dentro de esta área dibujada. Cualquier otra cosa fuera de esta zona no será visible. Echemos un vistazo a un ejemplo. Yo sólo voy a dibujar un rectángulo más. Esta vez voy a crear un rectángulo blanco en la esquina inferior derecha. Voy a establecer la posición inicial para estar en el centro del Lienzo, así que son 300, 150. Entonces exactamente lo mismo para la talla 300 por 150. Para crear este clip, primero voy a dibujar un círculo en el centro del Lienzo. Podemos usar un círculo para ser el área a la que queremos restringir el dibujo. Añadamos un círculo o un arco. Sabemos hacer esto. Podemos usar ctx.arc. El puesto de partida está en el centro. El ancho de Lona dividido por dos. Lo mismo para las alturas. El radio de 150. Después para dibujar un círculo completo, comenzaremos con el cero como posición inicial y luego dos veces Math.pi. Entonces lo dibujaremos con el trazo. Ahora, ahí está nuestro un círculo que es la altura completa del Lienzo. Ahora bien, si queremos restringir todo el dibujo para que esté dentro del círculo, entonces podemos recortar esta área. Contamos con ctx.clip. Ahora, todos los rectángulos y todos los objetos que se habían dibujado sólo son visibles dentro de este círculo o de esta área que hemos creado. Todo lo que queda fuera del círculo es simplemente el color de fondo de Lienzo. Es así como podemos quitar secciones del Lienzo. Miramos cómo cubrir ciertas áreas, miramos cómo eliminar píxeles del lienzo, y finalmente, miramos el método de clip para restringir todo el dibujo dentro de un área determinada, como el círculo que hemos dibujado. Dejaremos ahí este video, y nos vemos en el siguiente video donde echaremos un vistazo a los gradientes. 12. Conceptos básicos de Canvas: Degradados: Bienvenidos de vuelta chicos. En este video, vamos a echar un vistazo a cómo usar gradientes dentro del lienzo. En particular, vamos a echar un vistazo a dos tipos diferentes. Vamos a echar un vistazo a los gradientes lineales y radiales. Para empezar, he creado una nueva pluma, titulada gradientes. Voy a quitar el script de lona en, que no necesitamos. pueden quitar todas las secciones debajo de las dos variables. Voy a dejar el fondo de estilo como rojo, eso está bien. Empecemos solo con un comentario, solo de gradientes lineales. Vamos a empezar por usar el método de creación de gradiente lineal. Por lo que ctx.CreateLinearGradient, y como de costumbre, tenga cuidado con las letras mayúsculas para lineales sobre gradiente. Por lo que dentro de los corchetes, necesitamos especificar la posición de inicio y final. Entonces voy a crear un gradiente desde una esquina del lienzo, justo enfrente en línea recta a la otra. Esto se va a usar para fusionar de un color a otro, o incluso para fundir usando tantos colores como quieras. Entonces voy a establecer la posición inicial para estar en la parte superior izquierda, que es 0, 0, y luego la posición de meta para estar en la parte inferior derecha. Entonces recortemos eso con lieno.ancho y lieno.altura. Entonces a continuación voy a agregar esta línea en una variable. Tan variable voy a llamar a mina lineal, porque es un gradiente lineal. Guardémoslo ahí dentro. Podemos entonces utilizar esta variable para agregar topes de color, que es el color que nos gustaría agregar en diversas posiciones o diversas etapas del gradiente. Entonces vamos a añadir la variable de Linear.AddColorStop. Entonces dentro del método add color stop, voy a agregar dos parámetros. Entonces el primero es un valor entre cero y uno. Esta es la posición del gradiente donde nos gustaría que se aplicara el color. Entonces cero es el inicio del gradiente, y uno es el final. Entonces voy a establecer el color inicial para que sea verde, y luego voy a añadir dos más. Así lineal.AddColorStop. Esta vez vamos a ciclo de naranja. Yo quiero que esto sea a mitad de camino a través del gradiente. Entonces voy a configurarlo para que sea 0.5 y color para que sea naranja. Entonces pondremos uno más exactamente de la misma manera. Pero esta vez al final del gradiente, que es la posición uno, y luego el color, quiero poner el mío para que sea rojo. Por lo que ya casi estamos ahí ahora solo un par de líneas más para que este gradiente funcione. Entonces a continuación vamos a establecer el FillStyle, que ya has visto antes, CTX.FillStyle. lo que hasta ahora en este curso, hemos estado estableciendo cierto color, como el blanco, el rojo o el negro que quisiéramos aplicar al FillStyle. Pero esta vez podemos aplicar el gradiente añadiendo la variable lineal, que acabamos de crear. Entonces, por último, necesitamos crear los rectángulos, agregar el gradiente también. Entonces, simplemente usemos un método FillRect. Voy a crear este rectángulo para que tenga el mismo tamaño que el lienzo. Entonces 0, 0, 600, 300, y guarde eso, y ahí lo tenemos. Ahí está nuestro gradiente lineal. Entonces iniciamos el inicio, que es la posición cero. Empezamos con un color verde, y luego a mitad de camino nos mezclamos en naranja. Entonces finalmente terminamos en el color rojo, que está configurado para ser la posición uno, que es la última posición del gradiente, que está justo aquí. He creado el rectángulo para agregar el gradiente lineal también. Por lo que mencioné al inicio de este video vamos a echar un vistazo a dos tipos diferentes de gradientes. Entonces el primero siendo lineal, y luego el siguiente al que vamos a echar un vistazo es el gradiente radial. Entonces la diferencia entre un gradiente lineal funciona entre dos puntos a través de una línea recta, mientras que un gradiente radial es circular y es una mezcla entre dos círculos imaginarios, que especificamos. Entonces echemos un vistazo al gradiente radial. Al igual que lo hemos hecho para el primer ejemplo, voy a crear una variable, almacenar esto en. Entonces esta vez lo voy a llamar radial. Así que establece que igual a CTX.CreaterAdialGradialGradient. Por lo que los parámetros que necesitamos agregar son diferentes al gradiente lineal. En lugar de tener un punto de inicio y un punto final, necesitamos definir dos círculos imaginarios. Uno que está empezando y otro que es un círculo final. Entonces para empezar, voy a crear los dos círculos en las mismas coordenadas de inicio. Después crearemos el efecto de gradiente ampliando el radio del segundo círculo. Entonces, sumemos los seis parámetros. Los tres primeros parámetros es para el círculo inicial. Entonces voy a crear esto en el centro del lienzo, que es de 300, 150. El tercer valor es el radio del círculo inicial. Entonces voy a poner que eso sea 10. Entonces vamos a hacer lo mismo para el segundo círculo. Por lo que de nuevo, en el centro del lienzo de 300, 150. Pero esta vez haremos que el radio sea de 150. Entonces al igual que el ejemplo lineal, podemos usar la variable radial para agregar las paradas de color. Puedes agregar cualquier color que te guste dentro ahí. Yo sólo voy a mantener el mío igual que el último ejemplo. De hecho, solo copio estas dos líneas y cambio la variable para que sea radial. Después establece el FillStyle, y esto es radial. Entonces igual que antes, también usaremos FillRect. Voy a ponerlo para que sea del tamaño completo del lienzo. Entonces 0, 0, 600, 300. Ahora tenemos el gradiente radial que se muestra en la pantalla. Por lo que creamos el primer círculo imaginario con el radio de 10. Este es el círculo interior más pequeño, que tiene el color inicial del verde. Entonces a medida que nos movemos hacia afuera al círculo más grande, que tiene radio de un 150, este es el punto final donde nos mezclamos con rojo, que es el exterior del círculo. Por lo que este efecto se está logrando colocando dos círculos, ambos en las mismas coordenadas de inicio de 300, 150. Por supuesto, podemos jugar con estos y crear un offset. Entonces por ejemplo, si cambiamos la posición x del círculo de inicio a ser 200, eso mueve la sección verde para estar lejos con la izquierda. Podemos jugar con esto y conseguir algunos efectos bonitos. Entonces cambiemos eso de nuevo, y también podemos cambiar la posición del círculo final. Entonces cambiaré ese para que sea 200 también. Esto compensa el segundo círculo a la izquierda también dándonos un efecto diferente ahí. Entonces, ten una jugada con esos valores y veamos qué puedes crear. Entonces, cuando estés listo para pasar al siguiente video, echaremos un vistazo a agregar imágenes al lienzo. Te veré ahí. 13. Conceptos básicos de Canvas: Añadir imágenes al lienzo: Vamos a tomar un pequeño descanso de dibujar realmente sobre el lienzo. Voy a echar un vistazo a cómo podemos realmente agregar imágenes al lienzo y cómo podemos trabajar con ellas. He ido adelante y he creado un nuevo bolígrafo y lo he llamado Adición de imágenes al lienzo. Adelante y crea uno si aún no lo has hecho. Para empezar voy a cambiar el estilo, así que solo eliminemos el color de fondo porque no necesitamos eso. Entonces sólo voy a añadir el borde una vez más de dos píxeles y una línea sólida. Entonces vamos a deshacernos de la sección de gradientes lineales y radiales. Ahora nos queda con un lienzo en blanco con el borde. Empecemos agregando elementos de imagen al lienzo y almacenemos esto dentro de una variable llamada Image. La imagen variable es igual a una nueva imagen. Después podemos establecer la fuente de la imagen con image.src, y luego le agregaremos la ruta a la imagen que desea agregar. Para agarrar una imagen voy a dirigirme a Wikipedia. Iré a wikipedia.org. Basta con echar un vistazo a una imagen con la que quieres trabajar. Esto parece una bonita imagen, así que vamos a dar un click en eso. Entonces si haces clic derecho o Control click, entonces podemos hacer clic en “Copiar dirección de imagen”, y luego pegarlo dentro de la fuente de imagen. Para que esto se muestre necesitamos usar el método de dibujo de imagen, por lo que CTX.DrawImage. Entonces dentro de los corchetes necesitamos primero agregar la imagen que desea agregar. Lo tenemos almacenado dentro de la variable de imagen, y luego está en la posición inicial por lo que el x e y de 0, 0. Esto debería hacer que la imagen aparezca en la esquina superior izquierda. Como puedes ver la imagen es mucho más grande que el lienzo. Se estira mucho más de lo que podemos ver. Esto es fácil de arreglar. Todo lo que necesitamos hacer es establecer el tamaño de la imagen. Voy a establecer esto para que sea del mismo tamaño que el lienzo con lieno.width, entonces vamos a establecer la altura para que sea lieno.height y guarde eso. Es así como podemos agregar imagen al lienzo. No estamos restringidos a otras imágenes nuevas cada vez. En realidad podemos usar una imagen que ya ha sido agregada, no sólo al lienzo sino a cualquier parte de una página web. Por lo que podemos agarrar ya sea la imagen completa o una sección de la imagen. Para hacer eso solo voy a copiar esta fuente de imagen, y luego vamos a eliminar la imagen que acabamos de agregar. Voy a agregar esta imagen como un elemento HTML, por lo que la fuente de imagen es igual a, y luego pegar en el enlace que acabamos de copiar. Se puede ver que la imagen ha aparecido debajo del lienzo. Eso es bueno. Simplemente voy a agregar un ID, que podamos usar eso con scripting simplemente de MyImage. Voy a usar eso para agarrar la imagen pronto. Entonces solo para restringir la altura, que podamos ver un poco mejor en la página pongamos esto en 300, para luego cerrar la etiqueta de imagen. Tenemos una imagen existente la cual está apareciendo fuera del lienzo. Queremos agarrar la imagen completa o una sección en particular. El modo de hacer eso. Si volvemos a las etiquetas de guión y luego podemos agarrar esta imagen por su ID. Almacenemos la imagen dentro de una variable de imagen una vez más. El imagen es igual a documentos, y vamos a agarrarla por su ID con getElementById. El ID que queremos agarrar es mi imagen, así que solo agrega eso dentro de ahí, y luego podremos redibujar la imagen sobre el lienzo con CTX.drawImage. ¿ Qué quieres dibujar? Bueno, es esta variable llamada Imagen así que agreguemos eso en. Entonces la posición a la que queremos agregarla es 0, 0. La imagen no aparece en el lienzo. Esto se debe a que estamos tratando de recortar la imagen antes de que en realidad se termine de cargar. Para superar esto, podemos agregar una función onload. Esto significa que nuestro código de lienzo no se ejecutará realmente hasta que el documento haya terminado de cargarse. Esto incluye todas las imágenes y todos los guiones. Vamos a rodear todo el script actual dentro de la función onload, por lo que window.onload. Una vez que el navegador se haya cargado, activaremos una función. Abramos las llaves, pero rodeemos todo el código existente dentro del script entre estas llaves. Vamos a sangrar esto y guardar aquello. Ahora la imagen ha aparecido en el lienzo, como algo a tener en cuenta porque a veces tratas de agarrar una imagen o algo de una página web antes de que realmente se cargue, y luego cuando no pasa nada, a veces creo que hay un problema con el código. tanto que todo lo que necesitamos hacer es esperar a que la ventana o el navegador termine de cargar el script o la imagen, y entonces podemos empezar a trabajar con ella. Lo último que quiero mostrarles es cómo recortar o cortar una imagen. También podemos hacer esto usando el mismo método de imagen de dibujo que solo lo tomarás y mirarás. La única diferencia es que toma mucho más parámetros. Echemos un vistazo a una diapositiva para averiguar cómo usar esto. En el lado izquierdo está la imagen de origen. Esta es la imagen original, es de tamaño completo. El primer parámetro es simplemente la imagen que queremos agarrar. Después conseguimos una posición x e y que es el punto de partida en la esquina superior izquierda de la zona que queremos recortar. Después estableceremos el ancho y la altura del área de la imagen que nos gustaría recortar. Entonces, del lado derecho, tenemos los últimos cuatro parámetros los cuales todos se relacionan con el lienzo y cómo nos gustaría colocar en el lienzo. Empezaremos con la posición x e y. A ellos también les gustaría dibujar la imagen recortada. Nuevamente, esta es la esquina superior izquierda de la imagen en relación a las coordenadas del lienzo de 0, 0. Entonces, por último, tenemos el ancho y la altura de la imagen recortada. Este es el tamaño que tendrá la imagen cuando se vuelva a colocar en el lienzo. Volvamos a CodePen y pongamos esto en práctica. Usando lo que acabamos de echar un vistazo, podemos agregar algunos parámetros adicionales para dibujar imagen. En lugar de la imagen a tamaño completo, que tenemos actualmente, quiero recortar un cuadrado de 100 por 100 pixeles desde la esquina superior izquierda de la imagen original. Podemos dejar el primer valor tal como está, porque esta es la imagen que nos gustaría agarrar. También podemos dejar la posición 0, 0 ya que esta es la esquina superior desde la que queremos empezar. El área que queremos agarrar va a ser del 100 por 100. Después para colocar esta sección en el medio del lienzo, voy a usar lieno.ancho, dividido por 2, quitar 50. Este 50 es la mitad del ancho de la imagen por lo que esto compensará la imagen para estar en el centro. Haremos lo mismo por la altura. Divide por 2, quita 50. Entonces mantendremos fuera el mismo tamaño que el cultivo original de 100 por 100 píxeles, y ahí lo tenemos. Esta es la esquina superior izquierda recortada de la imagen original que es de esta sección. Después colocaremos en esta zona recortada en el centro del lienzo con estos últimos cuatro parámetros. Es así como podemos agregar imágenes al lienzo y te veré en el siguiente video. 14. Conceptos básicos de Canvas: Patrones y sombras: Este video se trata de usar patrón y sombras con el lienzo. Vamos a empezar con patrones, y para este ejemplo voy a añadir una imagen. Esta imagen va a ser un azulejo sin fisuras, lo que significa que podemos repetir el azulejo horizontal y verticalmente, y todo se mezclará en uno. He creado un nuevo CodePen con el título de Patterns & Shadows. He cambiado el ancho del lienzo para que sea un poco más grande, que es de 1,000 por 1,000. Esto se debe a que el azulejo que voy a estar usando es de 640 píxeles, esto solo te da un poco más de espacio para repetir el azulejo. Si mantener la función, la función onload del último video, la variable canvas, la variable context. También reutilizaré esta variable de imagen que utilizamos en el último video. Para empezar, sólo voy a dirigirme a Pixabay solo para agarrar un azulejo de imagen para utilizarlo en esta demostración. Yo quiero hacer una búsqueda de azulejo sin costuras, y luego simplemente elige un azulejo que te guste. Iré por éste y luego solo doy clic en la Descarga Gratuita. Idealmente queremos descargar la imagen e incluirla en nuestra carpeta del proyecto, voy a enlazar desde ahí. Pero debido a que estamos usando CodePen, a menos que tengas una cuenta PRO no las construirás como un activo para usar realmente. Sólo voy a por este ejemplo, haga clic en “Ver”, y luego seleccione la dirección de la imagen. Entonces peguemos esto en la fuente de imagen del último video. Ahora podemos usar esta imagen para crear un patrón, y el patrón se declara de manera similar a los gradientes que miramos hace algunos videos. Vamos a estancar esto dentro de una variable de patrón, una variable de patrón. Voy a poner esto para que sea CTX.CreatePattern. Crear patrón toma en dos parámetros. El primero vamos a añadir la imagen que se desea mostrar, y luego el segundo parámetro es el tipo de repeticiones que queremos utilizar. Yo sólo voy a poner esto para que se repita, y volveremos a eso en tan solo un momento. Entonces a continuación podemos establecer el FillStyle para que sea igual al patrón que acabamos de crear. Entonces, por último, establecemos la forma que queremos que se llenen con el patrón, solo voy a agregar un rectángulo y mantenerlo del mismo tamaño que el lienzo. 0, 0 y el tamaño del lienzo ahora es de 1,000 por 1,000. Podemos ver que la imagen se ha mostrado, selecciona tu estiramiento el navegador y ver todo esto. Se ha repetido la imagen, ahora está llena el tamaño completo del lienzo. Sabemos que se ha repetido porque Canvas tiene 1,000 píxeles de ancho, sin embargo la imagen es de solo 640. Tenemos repetición justo por ahí, y este es el inicio de un nuevo azulejo. Echemos un vistazo a algunos más de los parámetros. Esto se repitió, puedo cambiarlo a no-repeticiones y probablemente puedas adivinar qué hace eso. Esto cambia la imagen para que solo se muestre una vez en la posición especificada. También hay repeticiones en el eje x y en el eje Y. Entonces repite x, y esto significará que solo se repiten a través del eje x, debería haber algún espacio en blanco en la parte inferior y luego hagamos lo mismo en el eje y. Ahí están las repeticiones verticales, y por supuesto puedes repetir lo que quieras, no tiene que ser una imagen. A continuación, queremos pasar a mirar sombras, y para ello, solo voy a cambiar el cuadro de ancho de lienzo para que sea 600 por 300. Entonces podemos quitar el ejemplo de patrón para mover toda la sección de imagen, toda la sección de patrón, también puedes quitar la imagen de abajo ahí. Para este ejemplo de sombras, voy a dibujar algo de texto sobre el lienzo. Con ctx.font lo hará bastante grande, lo haremos 80 píxeles. Después un tipo de fuente de Helvetica, y luego un FillStyle para ser igual a un color. Haré el mío verde y luego el text-align, coloquemos en el centro del lienzo. Bien, dibujemos el texto con FillText. Ojalá recuerden cómo hacer esto, el primer parámetro es el texto que queremos mostrar. Vamos a mantenerlo simple, con sombras de texto es cinco este ejemplo. La posición X e Y, voy a crear un tamaño de ancho de lienzo dividido por 2, y luego lo mismo para la altura. El último parámetro fue el ancho máximo, vamos a restringir esto a 400 píxeles. Ahí hay texto, pero acabamos de conseguir un poco de error tipográfico en esto, que necesita ser px de curso.Vale, genial. Tenemos el texto en la pantalla, podemos empezar a añadir algunas sombras. Hagámoslo arriba del texto que acabamos de dibujar. El primer método al que vamos a echar un vistazo es ShadowOffsetX. Este es un valor en píxeles, empecemos con cinco. Este es el ShadowOffset en el eje x, y luego para que puedas ver la sombra que acabamos de crear vamos a añadir un color de sombra. Tenemos CTX.ShadowColor, se destaca muy bien, cambiemos eso para que sea rojo. Podemos ver la sombra roja, que se encuentra a través de cinco píxeles en el eje x. Estos valores pueden ser positivos o negativos, por lo que cambiaremos esto para que sea negativo cinco. Deberíamos ver la sombra del texto en el lado opuesto. Podemos hacer lo mismo en el eje y, tenemos un ShadowOffsety. Añadamos una sombra de cinco píxeles en el eje y. Como puedes ver, podemos combinar la X y la Y para crear algunos efectos de aspecto agradable. También podemos agregar un desenfoque usando el método ShadowBlur, y establece el nivel de los efectos borrosos. El valor predeterminado es cero, estableceremos esto para que sea algo un poco más grande, solo son 15. Esto nos da un bonito efecto borroso o un mezclado. Podemos aumentar esto para que sea un poco más grande. Intentaremos 30, y eso es un poco más sutil. Volvamos a cambiarlo a 20. Tengan un poco de juego con esos valores y vean a qué se les puede llegar, y los veré en el siguiente video. 15. Un paso más allá: Curvas de Bézier y cuadráticas: Bienvenidos de vuelta chicos. Vamos a empezar un poco las cosas ahora y echar un vistazo a cómo usar curvas bezier y cuadráticas. Vamos a crear nuevo bolígrafo para este video. Por lo que a esto se le llama curvas bezier y cuadráticas. Deberíamos volver a copiar esto solo para que no tengamos que seguir recordando cómo deletrear eso. Pega eso en el título y guarda eso, hazlo un poco más de espacio. Debería mover todo el guión de nuevo excepto nuestras variables de lienzo y contexto. Entonces estamos bien para ir. En primer lugar vamos a echar un vistazo a las curvas cuadráticas. Para empezar y explicar mejor cómo funcionan, primero voy a dibujar tres círculos o tres puntos en el lienzo como referencia. Empecemos con un camino, y ya ves por qué los dibujamos en tan solo un momento. Vamos a crear los puntos de inicio, y luego vamos a crear nuestro primer círculo, estamos en arco. Entonces voy a hacer los puntos de inicio 50, 250, radio de cinco, y la posición de cero para empezar, y para hacer un círculo completo es dos veces Math.pi. Yo sólo voy a copiar este arco para que puedas usarlo un par de veces más. Pasemos a los segundos puntos para dibujar el segundo círculo. Entonces uno es estar en 550, 50. Dibujemos el segundo arco ahí, y luego el tercero se va a mover a la posición 50, 50, y luego el tercer círculo, justo ahí. Después para dibujar los círculos, utilizaremos el método de relleno. Cambiemos tanto las posiciones de los arcos a las que deben trasladarse. Entonces este es 550 y 50, y el tercero es 50 y 50. Ahora, también nos dieron los tres puntos en el lienzo como referencia. Entonces sólo voy a añadir un comentario. Este es el punto de inicio, estos son los puntos finales, y luego el tercero es lo que llamamos punto de control. Utilizamos QuadraticCurveTo para crear lo que se llama curva bezier cuadrática. Este tipo de curva comienza a partir de los puntos de plumilla actuales. Empecemos con los bolígrafos actuales mediante el uso de un MoveTo. Esta es la posición con la que queremos empezar, que es este primer punto aquí. Por lo que los puntos de partida fueron de 50, 250. Esos son puntos dentro de los corchetes, que moverán el bolígrafo a este punto inicial de ahí. Después utilizamos el método QuadraticCurveTo, y toma en los puntos de control y también los puntos finales. Añadamos eso ahora. Por lo que CTX.QuadraticCurveTo. Los dos primeros parámetros son los puntos de control, que es éste. Esta es la posición 50, 50, y luego dos más, que es el punto final. También tenemos los extremos de 550, 50, y luego para dibujar realmente la línea, podemos usar el trazo. Ahora veamos qué pasa. Tenemos una bonita línea de curva cuadrática, así que tenemos los puntos de partida a los que nos hemos movido, tenemos los puntos finales, que hemos agregado justo aquí, y luego tenemos un punto de control, que efectivamente tira de la línea hacia crear el tipo de curva que queremos. Por supuesto, podemos cambiar esto para que sean valores diferentes y esto afectará la posición de la línea. Cambiemos eso a 0, 0, y obtenemos un tipo diferente de curva a medida que la línea se tira más hacia la esquina. Siguiente Quiero echar un vistazo a una curva bezier. Esto funciona de manera similar a la curva cuadrática, que acabamos de ver. Pero en lugar de tomar un punto de control, utilizamos dos puntos de control para tener un control más fino sobre la línea. Vamos a añadir un comentario de curva bezier. Podemos llegar a trabajar agregando algunas referencias, al igual que hacíamos antes. Por lo que CTX.BeginPath. Esta vez necesitamos crear un punto de partida, y punto final, y luego dos puntos de control desde los que trabajar. Para que el destaque en el lienzo, simplemente cambiaremos el FillStyle, esta vez para que sea rojo. El punto de partida, hagamos el ctx.arc. El primer punto es de 100 por 50, un radio de 5 píxeles. Haré un círculo completo, con dos veces Math.pi. Copiemos este, y luego sumémoslos con el ctx.fill. Ahí vamos. Ese es el primer punto, que es nuestro punto de partida. Entonces crearemos el punto final. Añadamos un nuevo arco, y si pudiera hacer primero el MoveTo. Al siguiente le vamos a sumar nuestra posición 500, 50 y luego añadir el círculo en el mismo punto, así que ese es nuestro segundo círculo. Estos círculos que estás dibujando son puramente con fines de demostración, solo para que puedas ver cómo se está tirando la línea hacia puntos de referencia. En realidad no necesitamos incluirlos al crear las curvas. Tenemos los puntos de inicio, los puntos finales, y ahora necesitamos crear los primeros puntos de control. Entonces punto de control 1, y luego movamos la pluma para ser la posición 100, 250, pegar en el arco en la misma posición de 100, 250. Entonces punto de control 2, quiero estar en la posición 500, 250. Simplemente cambia el arco a 500 y luego a 250. Eso deja el punto de partida, el punto final, y luego los dos puntos de control en el enlace. Lo que buscamos es una curva que va a empezar aquí, luego dar la vuelta y ser jalada por los dos puntos de control y la curva de nuevo hasta los puntos finales en la esquina superior derecha. Al igual que con la curva cuadrática, moveremos el bolígrafo a la posición inicial. Tenemos CTX.MoveTo, y el punto de partida fue 150, y luego en lugar de QuadraticCurveto, utilizamos BezierCurveTo para dibujar la línea. Tenemos nuestros puntos de partida aquí arriba. Entonces agreguemos primero el punto de control número 1, que es 100, 250 en el x e y, y luego el punto de control 2, que es x, 500, y luego y, 250, y luego por último añadimos los puntos finales, que son nuestros 500 por 50. Después añadiremos el trazo para finalmente dibujar la línea sobre el lienzo. Al igual que antes, podemos mover los puntos de control para crear un estilo diferente de línea y darnos cualquier tipo de curva que queramos utilizar. Por supuesto, también puedes usar relleno en lugar de trazo para rellenar la curva con el color de fondo. Entonces cámbialo de nuevo a golpe. Eso es todo. Espero que eso tenga sentido, y así podemos usar curvas bezier y cuadráticas con el lienzo. Te veré en el siguiente video. Echaremos un vistazo al uso de los métodos de guardar y restaurar. 16. Un paso más allá: Guardar y restaurar: Bienvenidos de vuelta chicos. En este video, vamos a echar un vistazo a una característica interesante del lienzo, que son los métodos de guardar y restaurar. Vamos a crear un nuevo panel para demostrar esto. Llamemos a esto guardar y restaurar, así que Copiar y pegar en el título y limpiemos el guión, totalmente toda la sección del último video. Después cambia la altura del lienzo para ser 600 y luego estamos bien para ir. Ahí vamos. En primer lugar vamos a echar un vistazo a save on the say method guarda el estado actual del lienzo en una pila. El estado actual guardado incluye cosas como el estilo de trazo, el ancho de cualquier estilo de línea, las líneas base de teléfonos, límites poderosos, y la transformación por nombrar algunos. Empecemos por crear dos círculos, así que voy a crear uno rojo y otro verde. Voy a crear un camino, comenzaríamos camino. Esto es para el primer círculo, así que voy a añadir un FillStyle igual a verde y luego dibujar el círculo con el método arc. La primera posición que quiero es 150 por 150 en la x e y, un radio de 80, y luego crearemos un círculo completo con la posición inicial de cero. Después dos veces math.pi, y luego usa un relleno, así que es un círculo verde y solo voy a Copiar esto y Pegar en abajo cambiará el FillStyle al rojo y la posición para ser 400, 150, así que tenemos bonitos rojos y un bonito círculo verde. Voy a crear un círculo más abajo, pero esta vez sin ningún relleno de color, así que eliminemos eso y movamos la posición para ser 150, 400. Cambia la y a ser 400. Te das cuenta de cómo este tercer círculo, pesar de que no tenemos un FillStyle, ha heredado el color rojo del círculo anterior. Esto está bien si eso es lo que queremos. Pero también podemos usar guardar y restaurar en ciertos puntos a los cambios. Por ejemplo, podemos guardar el estado del lienzo después del primer círculo y luego usar el método de restauración justo antes crear el tercer círculo para darle el color del verde. Justo después del bloque de código para el primer círculo verde, agreguemos ctx.save y así sepamos lo que estamos haciendo. Simplemente añadiremos un comentario, para que esto guarde el relleno verde y luego para crear el relleno verde en el tercer círculo, podemos agregar ctx.restore. Apenas dobla el tercer círculo se dibuja. Ahí vamos. Por lo que eso restaura el color de los círculos para ser verdes igual que el primero. También podemos continuar con múltiples puntos de guardar y restaurar. Voy a crear un cuarto círculo, no el fondo. Esta vez la x es 400, la y es 400, y el resto puede permanecer igual. Tenemos un punto seguro para el campo verde, así que agreguemos un punto seguro también para el color rojo. Hagamos uno más guardar y unos comentarios para que esto guarde el relleno rojo. Entonces ya sabes, es algo acaba de pasar ahí. Una vez que hemos creado un segundo guardado, guardamos el relleno rojo, el círculo verde que te restauramos antes ahora vuelve a rojo. Solo comentemos eso fuera a C, así que es verde. Después agregamos el guardado, y luego cambia de rojo. El motivo por el que esto sucede es porque mencionaste al inicio de este video que cada vez que creamos un guardado se agrega a la pila, por lo que primero vamos a guardar, que es un campo nuevo, luego se guardaría en la pila un relleno rojo y como sólo hemos hecho el método de restauración una vez, vuelve a la última caja fuerte, que es el relleno rojo. Si entonces queremos revertir uno más guardar de nuevo al nuevo campo, necesitamos hacer una segunda restauración, por lo que ctx.restore. Ahora esto para restaurar de nuevo el verde sólo quitará el FillStyle. Eso debería ir a verde, lo que hace. Añadamos algunos comentarios a eso, por lo que debido a que esta es la primera restauración, esta recupera el último guardado y el último guardado fue el relleno rojo. Entonces abajo tenemos la segunda restauración, que recupera el segundo último guardado de la pila, y el segundo último color, que guardaste fue el relleno verde original. Van a ir tan esperanza que tiene sentido. Al usar guardar y restaurar, todo depende del orden en el que creamos los guardados. Entonces necesitamos restaurar en un orden particular para asegurarnos de que recuperemos el guardado particular que vamos a querer reutilizar. Gracias y pasaremos ahora al siguiente video donde echaremos un vistazo a cómo escalar, rotar y traducir. 17. Un paso más allá: Escalar, rotar y trasladar: Bienvenidos de vuelta a todos. Empecemos por crear en nuestra nueva pluma para este video, que se llama escala, rotar y traducir. Entonces vamos a cambiar el título para ser escala, rotar y traducir. Entonces vamos a crear nuestra plantilla de esqueleto. Para reutilizar dará la función, pueden eliminar las dos variables y todo el resto. Ahí vamos. Por lo que este video se trata de aplicar transformaciones a nuestros dibujos de Lienzo. En este video, estaremos buscando escalar, rotar y traducir. Entonces primero, queremos empezar por crear un rectángulo simple para manipular. Entonces dibujemos un rectángulo con un estilo de relleno. Voy a hacer el mío morado. Después dibuja al Lienzo con FillRect. lo que la esquina superior izquierda es 0, 0, 300 en la x y 200 en la y Así que sólo un simple rectángulo lleno. Voy a empezar agregando el método de traducción, y esto mueve los puntos de referencia de x e y a una ubicación diferente. Entonces agreguemos ctx a nuestro traductor. Se necesitan dos parámetros, que es el valor x para empezar. Añadamos valor y de 100. Entonces podemos ver lo que eso acaba de hacer. Hemos traducido los puntos de referencia, que originalmente estaba 0, 0 en la esquina superior. Después hemos movido el punto de referencia para ser 100 a través y 100 abajo en el eje y. También podemos rotar nuestro triángulo o rotar nuestro dibujo utilizando el método de rotación. Al usar la rotación, el valor predeterminado, en el que estamos, está en radianes en lugar de grados. Por lo que para convertir a grados, necesitamos multiplicar los grados por maf.pi dividido por 180. mismo valor que teníamos al inicio, como 45, será entonces en grados. Esto rotará el rectángulo 45 grados. Sólo tenemos que tener cuidado al usar translate y rotar ambos juntos. Tenemos que añadir traducir primero. Porque si no lo hacemos, los puntos de rotación son el origen Canvas, que es la esquina superior izquierda. Entonces solo asegúrate de que estos dos se apliquen en el orden correcto. Entonces solo voy a comentar la rotación y voy a pasar a escalar nuestros dibujos. Por lo que puedes escalarlos para que sean más grandes o más pequeños. Para ello, solo voy a crear un rectángulo más. Entonces solo copiaré esta sección y luego pegaré el segundo triángulo en. Entonces el estilo de relleno, voy a poner el mío en naranja. Después para alejarlo, agregaremos un traductor. Entonces la x de 100 y el valor y de 300. Por lo que conseguimos los dos rectángulos dibujados a la pantalla con diferentes ubicaciones traducidas. Vamos a utilizar el método de escala para aplicar alguna escala al segundo rectángulo. Entonces usamos el ctx.scalemethod. Esto toma dos parámetros. Entonces el ancho y la altura. Entonces si quisiéramos escalar el dibujo para que fuera la mitad de su tamaño actual, o 50 por ciento, usaría 0.5 en x e yEsto hace que nuestro rectángulo sea la mitad del tamaño que tenía antes. Por supuesto, uno sería 100 por ciento es tamaño original. Si quisiéramos hacerlo el doble del tamaño, podríamos cambiar esto para ser dos o 1.5, para ser 150 por ciento y así sucesivamente. Una mirada tan básica a aplicar transformaciones. En el siguiente video, vamos a construir sobre lo que hemos mirado en este video mirando cómo usar tanto el método de transformación, la transformación inicio. Entonces nos vemos ahí. 18. Un paso más allá: Transformaciones del lienzo: En el último video, miramos algunos métodos de transformación como: traducir, rotar, y cómo escalar nuestros objetos. En este video, vamos a seguir adelante y echar un vistazo a cómo podemos aplicar todas estas transformaciones en un solo método. En particular, vamos a estar echando un vistazo al método de transformación y set transform. Vamos a crear nuestra nueva pluma para hacer esto en. A ésta se le llama transformaciones. Podemos dejar el tamaño del Lienzo tal como está. De hecho, dejaremos el primer rectángulo, que es el morado. Deberíamos deshacernos del ejemplo naranja, y nos pondremos a trabajar con este triángulo. He comentado rotar, y quiero hacer lo mismo para traducir. Ya verás por qué estos dos se quedan dentro, en tan solo un momento. Este restaura nuestro rectángulo para estar en las coordenadas originales en la parte superior izquierda. En primer lugar queremos echar un vistazo a usar el método de transformación, por lo que ctx.transform. Esto se puede complicar bastante. Sólo voy a añadir un comentario anterior para mostrarte todos los parámetros que podemos utilizar, por lo que el intervalo de seis. El primero es el escalado horizontal. El segundo es sesgado horizontal. El primitivo número 3 es sesgado vertical. Entonces el número 4 es la escala vertical. Apenas dos más para ir, el número 5 es traducir o moverse horizontalmente. El último, que es el número 6, es traducir verticalmente. Ahí hay bastante que tener en cuenta. En primer lugar, vamos a echar un vistazo a los parámetros que ya conocemos, que utilizamos en el último video y estos son escalar y traducir. Añadamos estos Dentro del método de transformación. En primer lugar, veamos el escalado. El primer parámetro es la escala horizontal. Voy a poner esto como uno, que es el equivalente al 100 por ciento. Al igual que el último video, 0.5 es 50 por ciento y así sucesivamente. Se da por ahora, así que pongamos eso en cero. Lo mismo con el sesgo vertical. El cuarto parámetro es el escalado vertical. Pondré eso de nuevo para que sea uno o 100 por ciento. Entonces el número 5 y 6 es traducir en el eje x e y. Vamos a mantenerlo simple y lo traduciremos en el eje x, 50 píxeles y cero en la y, y guardemos eso. Ahí está nuestro rectángulo devuelto. Se le ha devuelto el mismo tamaño porque hemos establecido la escala en el x e y para que sea del 100 por ciento. Yo puedo hacer eso un poco más grande, así como así. lugar de la posición inicial para estar en la esquina superior izquierda de cero cero, nos hemos movido a través de 50 píxeles en el eje x, y lo hemos dejado en cero en el eje y, por lo que sigue en la parte superior. El único parámetro que no hemos mirado es el sesgo horizontal y vertical. Apliquemos ahora algunos de estos valores. Empieza con sesgo horizontal y veamos qué efecto tiene esto. Empecemos con 0.2. Deja que aumente esto. 0.5, y te dan la idea para que pueda seguir aumentando esto. Probaremos uno, y podemos avanzar aún más, no nos detenemos en uno, y así sucesivamente. Cambiemos ahora el sesgo vertical. Nuevamente, empecemos con 0.2. y deberíamos conseguir un sesgo en la dirección vertical en lugar de horizontalmente. Echemos un vistazo a 0.5. Podemos usar esto para hacer algunas formas interesantes. Probemos uno. Ahí vamos. Esto es útil si queremos aplicar bastantes transformaciones a la misma forma. Voy a cambiarlo de nuevo a cero y volver a nuestro rectángulo original. Al utilizar los métodos de traducción, no sólo las transformaciones que establecemos dentro de los parámetros aplicados, sino que también toma en cuenta las transformaciones como escala y translate, que ya han sido declaradas previamente. Esto es lo que llamamos agregar a la matriz de transformación. Usando el método de transformación, hemos movido la traducción horizontalmente en 50 píxeles. Si descomentamos las traducidas que fijamos previamente. En el eje x tenemos la traducción de 100 píxeles, por lo que deberíamos obtener los 100 píxeles, agregarlo de los 50. Si simplemente descomentamos las traducidas, lo que hacemos. Eso se ha movido más de 150 píxeles y también tenemos los 100 píxeles en el eje y. Basta con tener en cuenta que también se tomará en cuenta cualquier cosa que se esté aplicando antes de esta transformación. Pero y si quisiéramos que nuestra transformación hiciera caso omiso cualquier transformación previa o reiniciara efectivamente la matriz de transformación. Entonces es cuando podemos aprovechar el método set transform. Set transform restablece la transformación actual antes de aplicar cualquier transformación que establezcamos. Para hacer esto todo lo que tenemos que hacer es cambiar transformar para ser set transform. Te das cuenta de cómo ahora se ha ignorado la traducción que fijamos en la parte superior, dejando sólo los parámetros que establecemos para que se apliquen al rectángulo. Es así como podemos traducir, escalar y sesgar usando el método de transformación. Lo principal a recordar es que al usar transform, siempre tomará en cuenta cualquier transformación previa. No obstante, si establecemos que se establezca transformación, se ignorarán las transformaciones anteriores, dejando sólo las que están entre paréntesis a aplicar. Gracias por verlo y nos vemos en el siguiente video. Echaremos un vistazo a trabajar con píxeles. 19. Un paso más allá: Trabajar con píxeles: En este video, vamos a pasar de las transformaciones, voy a echar un vistazo a trabajar con píxeles. He ido adelante y he creado un New Pen, dentro de CodePen llamado trabajar con píxeles. Cambiamos la altura del lienzo a 300 porque eso es todo el espacio que necesitamos, y además eliminamos cualquiera de las transformaciones del último video. fotos digitales o las imágenes de óxido se componen de píxeles, y los colores se componen de una combinación de rojo, verde y azul para crear cualquier color imaginable. Las fotos a menudo también pueden tener un canal de decaimiento, que se llama canal Alfa y esto representa el valor de transparencia. Para este video, vamos a estar manipulando los valores de estos cuatro canales para crear efectos como hacer una imagen en color a escala de grises. Para este video, vamos a estar manipulando los valores de estos cuatro canales para crear diferentes colores y efectos. Estos efectos se pueden utilizar para hacer cosas como hacer la escala de grises de la imagen, o en blanco y negro, y estos son técnicas similares utilizadas en el software de edición de imágenes, como Photoshop. En primer lugar vamos a echar un vistazo a CreateImageData, queremos estancar esto dentro de una variable llamada ImageData. Establece que sea CTX.CreateImageData, y para ello simplemente vamos a pasar en un tamaño de la imagen que quieres crear. Voy a hacer el mío 400 píxeles de ancho por 200 píxeles de alto, y esto crea un objeto ImageData en blanco. nuevo objeto ImageData toma parámetros como un ancho, una altura, y también el ImageData. A continuación vamos a crear un JavaScript for loop, y esto es para que podamos recorrer todos los valores dentro de los objetos ImageData. El valor que nos interesa son los datos de píxel, porque hemos creado un área de 400 por 200 pero un píxel más bajo para trabajar, y cada píxel tiene cuatro colores diferentes, o para diferentes canales que es el rojo, verde, azul, y Alfa. Al usar CodePen podría ser bastante fácil aplastar el navegador. Simplemente voy a comentar el bucle, o en realidad tecleamos, para que no cause ningún problema. Entonces i es igual a 0; an i es menor que imagedata.data.length; i plus es igual a 4. Echemos un vistazo a lo que tenemos, hemos creado un bucle for, y un bucle for seguirá recorriendo todos los datos por una cierta cantidad de veces. El dato que queremos recorrer, es el imageData que acabamos de crear, y data.length es la longitud de la matriz o el número de píxeles, cual está contenido dentro de una sección de 400 por 200 píxeles. Porque cada píxel tiene los cuatro valores o los cuatro canales de los que hablamos, que era el rojo, el verde, el azul, y el Alfa. Después incrementaremos el bucle en cuatro cada vez, y luego estos cuatro valores individuales podrían manipularse dentro del bucle uno por uno. Hagámoslo ahora, seleccione la imageData.data y luego entre corchetes, podemos seleccionar el píxel individual. Hemos creado la variable de i, i más 0 va a ser el primer canal, y este es el valor rojo y el valor está entre 0 y 255. Copiemos esto tres veces más para crear los cuatro canales diferentes. Este va a ser el canal verde, eso es i plus 1, y luego i plus 2 es para el canal azul, y luego i más 3, y este es el Alfa o la transparencia. 0 es totalmente transparente y 255 es un color sólido. Si esto parece un poco confuso hasta la madurez todavía, vamos a echar un vistazo a todos los datos dentro de la consola y todos deberían quedar claros. Los nuevos valores de píxel de objetos son bloques transparentes por defecto, y este es un valor RGBA de cero. Yo sólo voy a cambiar para ser un color verde. Pondré los rojos a 0, y el verde a ser el valor máximo de 255, el azul a ser 0 y la transparencia. Para que sea un color sólido, haremos ese 255. Después, por fin para poner la imageData en el lienzo, usa CTX.PutiImageData. El ImageData que queremos agregar es la variable de ImageData, y la posición es 0, 0. Ahora podemos descomentar el bucle for para ejecutar esto, así que guarde eso. Ahí está nuestra imagen que es de 400 píxeles por 200 píxeles, con un bucle a través de todos los colores individuales y cambiar el color negro predeterminado para que sea este color verde, que establecemos aquí. Para tener una mejor comprensión de lo que está pasando ahí, solo voy a hacer un console.log y la información que queremos buscar es la imageData. Tenemos un registro de consola, vamos a hacer clic derecho y vamos a Inspecciones, y luego si seleccionamos la pestaña Consola, está nuestro objeto ImageData que hemos creado. Entonces vamos a abrir esto, hago click en la flecha pequeña ahí. Tenemos los datos y estos son los datos que estarán en acceder dentro del bucle. También tengo un ancho y alto que fijamos en 400 por 200. Si entonces abrimos los datos, entonces encontramos muchos datos retenidos ahí dentro, y esto es todos los datos de píxeles que se encuentran dentro de esta área de 400 por 200, y todos se seccionan en grupos de 10,000. Acabo de abrir un desplegable, hay datos de píxel 0-99. Hemos estado en bucle sobre cuatro píxeles a la vez, 0, 1, 2, 3, 4, estos son los cuatro valores de color para un píxel. Entonces el número 4, 5, 6, y 7 es el segundo píxel. Es por ello que saltamos el bucle por cuatro cada vez para que pasemos al segundo conjunto de píxeles, los primeros píxeles establecidos y así sucesivamente. Es 0, 255, 0, 255 por cada píxel, y estos son los datos que establecemos que lo haría en el bucle. Podemos cambiar esto rápidamente, y simplemente comprobar los valores como reflejados. Por ejemplo, podríamos cambiar el rojo por ser 10, y vamos a guardar eso y luego refrescar la página, abrir la imageData y luego volver a la primera sección. De nuevo, ahí está nuestro primer píxel, es 10, 255, 0, 255, y luego volveremos a recorrer el segundo píxel, y así sucesivamente. Es así como podemos manipular los valores de cuatro píxeles de RGBA, vamos a cerrar. Es así como podemos usar CreateImageData. El último método que quiero mostrarte en este video es GetImageData, y podemos utilizar el método GetImageData para conocer los datos de píxel para el área del lienzo. Por ejemplo, si solo quisiéramos conocer los datos de píxel 400 pixels por 100 pixels cuadrados podemos averiguarlo. Vamos a agregar esto a la parte inferior, solo voy a comentar esta consola cerrar sesión primero. Hagamos CTX.GetImageData y luego especificamos la posición de inicio que quieren agarrar. Si queremos agarrar un área en la esquina superior izquierda, fijamos la posición de parada de 0, 0. Pongamos que el área que queremos agarrar sea 100 por 100. Podemos registrar esto en la consola y luego rodear esta sección con corchetes y luego refrescar. Si entramos en las herramientas de desarrollador ahora haciendo clic en Inspeccionar, y luego entramos en la Consola y echa un vistazo a la ImageData. Podemos ver de inmediato que hay muchos menos datos de píxeles por las paredes para el último registro de consola cuando miramos la sección completa. Porque sólo estamos revisando un área pequeña en la esquina superior, tenemos mucho menos imageData dentro de la consola, y por supuesto aún podemos abrir cada una de estas y ver los datos individuales. Es así como podemos trabajar con píxeles en el lienzo, y te veré en el siguiente video. 20. Introducción al desafío: Conversión de imágenes a escala de grises: Entonces ahora tenemos una mejor comprensión de cómo trabajar con pixeles usando el Canvas, y ahora me gustaría poner un reto para que tengas una oportunidad. Ese reto es tomar una imagen en color y convertirla en escala de grises, o en blanco y negro, realmente me gustaría que le diera a esto un go tú mismo antes pasar a la solución en el siguiente video. Pero antes de que te deje para seguir adelante y darle una oportunidad a esto, solo hay una o dos cositas que me gustaría mostrarte primero, solo para ayudarte. El primero es realmente cómo hacer una imagen en escala de grises. En el último video usamos un bucle for, y agarramos todos los datos de píxel del lienzo. Una vez que encontraste una imagen para colocar en el lienzo, usando draw image entonces me gustará que crearas un for loop de una manera similar a ésta, aunque solo necesitamos los canales rojo, verde y azul. El modo en que podemos crear un efecto de escala de grises en la imagen es establecer el valor del canal rojo, verde y azul para que sea el promedio de los tres. Una forma de hacerlo es crear una variable y agregar los tres valores juntos, luego dividirla por tres, y establecer los tres canales para que sean el equivalente del valor promedio. Otra cosa importante que me gustaría señalar, que puede causar algunos problemas en el camino es que necesitamos usar el método get imageData para el reto. Al utilizar este método, requiere que la imagen así como el código que la ejecuta esté en el mismo dominio del servidor web. Debido a que no tenemos acceso al servidor, porque estamos usando CodePen, necesitamos agregar un atributo especial a la imagen llamada origen cruzado, y esto nos permite usar una imagen de una fuente diferente en nuestra demo sin arrojar ningún error. Si quieres saber más sobre el atributo de origen cruzado, puedes dirigirte ahora a este enlace en la pantalla. De lo contrario solo te mostraré la única línea de código que necesitarás agregar al crear la imagen. La línea de código que sí necesitas agregar, primer lugar voy a seleccionar una variable de imagen. Si tu valioso para cargar una imagen es un nombre diferente, por supuesto sí cambia eso. Entonces origen cruzado, y voy a poner el mío igual a anónimo. Entonces, si agregas esta línea de código justo antes de agregar la fuente de imagen, deberías estar bien para ir. También sepa si trabaja junto con un editor de texto en lugar de usar CodePen, también puede encontrarse con el mismo problema en ciertos navegadores, como Google Chrome al usar la configuración predeterminada. Una solución para esto es usar un host local como MMP para atender su proyecto. O también he encontrado que el navegador Firefox funciona sin ningún problema, así que dejo eso contigo para tener un go. Si te atascas, no te preocupes, solo pasa al siguiente video y te mostraré mi solución. 21. Desafío: conversión de imágenes en escala de grises: Hola chicos. Espero que hayas logrado completar el reto o espero que al menos le hayas dado un gol. Si te has topado con algún problema, no te preocupes, voy a seguir adelante y mostrarte una solución de trabajo. Vamos a seguir adelante y crear una nueva pluma. Voy a llamar a esto el reto: imagen grisscaling. Voy a crear un lienzo más grande que antes, sólo porque vas a estar agregando una imagen allí, que probablemente será mayor que 600 por 300. Entonces vamos a vaciar los guiones. Empezaremos con una etiqueta de guión limpia. Desde arriba voy a crear nuestras dos variables. En primer lugar es una variable de lienzo, que como de costumbre es document.getElementById. Por supuesto el ID es MyCanvas, y a continuación la variable de contexto, que vemos como ctx. Mantengámoslo consistente. El contexto es equivalente a Canvas.getContext. Ahora estoy usando el contexto 2D. Lo primero que voy a hacer es crear una imagen. Esta va a ser una imagen en color que luego podremos trabajar con los píxeles y convertirla en escala de grises. Esperemos que hayas llegado tan lejos al menos y hayas logrado agregar una imagen a la pantalla. La imagen variable es igual a una nueva imagen. Una vez que esta imagen se haya cargado con image.onload, vamos a activar una función. Esta función va a primero, dibujar la imagen a la pantalla, y luego una segunda cosa que queremos hacer es activar una segunda función, que voy a llamar escala de grises. En primer lugar dibujemos la imagen al lienzo, con CTX.drawImage. Todavía no hemos creado la fuente de la imagen pero sólo vamos a poner la variable de imagen ahí dentro. Empezaremos la posición en 0, 0, que es la esquina superior izquierda. Entonces la image.src, que es la ruta del archivo. Vayamos a Wikipedia. Tomaré una imagen de ahí para usarla. Este no va a nada bueno, es blanco y negro para empezar. Encontremos una imagen adecuada. Probemos contenido destacado. Este está bien. A continuación, haga clic derecho y copie la dirección de la imagen y pegue esto dentro de la fuente Ahí aparece imagen en la pantalla, eso está funcionando bien. Entonces lo que hice a continuación fue crear una función de escala de grises. Crearemos eso en tan solo un momento pero antes que nada lo voy a llamar dentro de esta función. Simplemente escribe escala de grises y luego los corchetes. Esto llamará a la función de escala de grises una vez que se cargue la imagen. Ahora vamos a crear esta función de escala de grises. Qué como esta función hacer, es ante todo nos gustaría agarrar los datos de la imagen, que es básicamente el tamaño completo del lienzo. Queremos agarrar toda la zona. Entonces queremos ejecutar el bucle for, manera similar al último video donde recorremos todos los datos de píxel. Al igual que se mencionó en la intro, vamos a promediar los canales rojo, verde y azul para darnos un efecto de escala de grises. Lo último que quiero que haga la función de escala de grises, es poner la matriz de píxeles modificada o los píxeles en blanco y negro de nuevo en el lienzo aprovechando el método de datos de imagen put. Empecemos por crear una variable de datos de imagen.Esto es equivalente a CTX.GetImageData. Empezaremos en la esquina superior izquierda del lienzo, y luego agarraremos todo el ancho del lienzo, y también la altura del lienzo. Esto va a almacenar los datos de la imagen. Voy a crear una variable más, simplemente llamada datos. Quiero establecer esto para que sea imageData.data. No tenemos que crear esta variable, la única razón por la que lo he hecho es porque usamos bastante imageData.data al usar el bucle for. Es solo un poco más corto almacenando dentro de una variable de datos. Entonces estamos listos para crear nuestro for loop. El bucle for puede ser bastante el mismo que el del último video, donde miramos la modificación de píxeles. Estableceremos la variable i para que sea 0 para empezar, y mantendremos el bucle en marcha mientras i es menor que los datos, que es esta variable aquí, .length. Esta variable de datos es una versión corta de escribir imageData.data.length. Entonces i plus o igual a 4. Si recuerdas esto es porque cada píxel tiene cuatro canales. Antes de empezar a modificar los canales individuales rojo, verde y azul, voy a crear una variable llamada promedio. Este va a ser el valor promedio del canal rojo, verde y azul. Vamos a establecer esto igual a datos y corchetes i. Este es el primer canal que es rojo, el añadir esto al verde, y azul. Datos i más 1, y luego datos i más 2. Este es el rojo, el verde y el azul. Agrega los tres valores juntos y luego divídalo por 3 para obtener el promedio. Empecemos con el valor rojo. Datos del primero es i, si recuerdas del último video pusimos este valor entre 0-255. Pero esta vez sólo lo vamos a establecer a la variable promedio. Entonces hagamos esto dos veces más, por el verde, y el azul. Yo más 1 y i más 2, y luego mudarme hacia abajo. Asegúrate de que esto esté fuera del bucle ahora. Tenemos que volver a poner estos datos de imagen en el lienzo, con CTX.PutiImageData. El dato que queremos tirar de nuevo sobre el lienzo es esta variable de datos de imagen. En la posición, está la esquina superior izquierda, que es 0, 0, y luego guarde eso. Te das cuenta después de hacer eso todavía no tenemos ningún cambio en el lienzo. Si recuerdas antes, mencionamos que necesitamos agregar una línea de código, que eran los atributos de origen cruzado. Añadamos esto justo en la parte superior ahora. Image.CrossOrigin. Voy a poner esto en anónimo y luego guardar eso. Se puede ver al instante el efecto ha tenido lugar. Esta línea de código nos ha permitido utilizar una imagen de una fuente diferente sin arrojar ningún error. Vamos a expandir esto para que puedas ver. Si comentamos los datos de la imagen puesta, deberíamos recuperar la imagen en color original que hacemos. Si querías trabajar con algún efecto diferente, en lugar de tener los tres canales establecidos en promedio, puedes cambiar esto para que sea cualquier cosa entre 0-255, y puedes ver el efecto ahí. Esa es una forma de completar este reto y por supuesto hay muchas formas diferentes de hacerlo. Pero lo principal es darle un objetivo y tratar de aprender de cualquier error. Con reto todo completo ahora, pasemos ahora al siguiente video y echaremos un mejor vistazo al bucle. 22. Un paso más allá: Haciendo un bucle: Espero que hayas disfrutado del último reto y bienvenido de nuevo. Vamos a echar un mejor vistazo al bucle. Te voy a mostrar cómo podemos crear un efecto similar a éste mediante el uso de for-loops, el método translate y también rotar. Este es el resultado final que buscamos lograr y básicamente es un arco rojo o un círculo rojo que es el fondo. Entonces vamos a crear un segmento, que es la sección de triángulo negro. Vamos a dibujar esto al lienzo, y luego usar un for-loop para recorrer todo el camino y seguir dibujando los segmentos hasta que volvamos al inicio. Cada vez que usamos rotar y traducir para asegurarnos que el nuevo segmento dibujado esté en la posición correcta. Vayamos a CodePen. En lugar de usar las plantillas de desafío, voy a follar el trabajo con Pixel Video, solo así conseguimos una plantilla con la que trabajar. Llamemos a esto Looping. Después quieres cambiar el lienzo para que sea 600 por 600 para empezar, y luego vamos a despejar todo excepto las dos variables en la parte superior y también la función onload. Ahí vamos. Ya estamos bien para irnos. Con lo que voy a empezar es el círculo de fondo rojo mediante el uso del método de arco. Vamos a hacer que el mío sea rojo. Tenemos CTX.FillStyle para ser igual al rojo y crear el arco y esto va a ser un círculo completo. A las coordenadas de inicio no les importará estar en medio del lienzo. Voy a usar lieno.ancho dividido por 2 hasta el punto central, y luego lieno.altura divide por 2 para comenzar nuestro arco en el centro del lienzo. El radio que queremos que sea 230. El inicio de la posición cero, y para crear el círculo completo, es 2 veces Math.pi. Entonces vamos a autocompletar para dibujar esto al lienzo. Igual que eso. Eso no está dibujado, por lo que debe haber un error de mecanografía en alguna parte. Justo ahí, que es la altura de la lona. Bien. Ahora tenemos el círculo de fondo rojo. Entonces podemos llegar a trabajar en el dibujo de los segmentos negros que queremos recorrer. Vamos a crear una función para hacer esto. Voy a llamar a mis segmentos de dibujo de función, y luego el código entre las llaves. Empecemos con BeginPath, y luego usamos CTX.MoveTo. Deseas desplazarte al centro del lienzo, lo que usamos ancho y alto de lienzo dividido por 2 para darnos los puntos de partida. Ahora estableceremos el estilo de relleno para que sea negro. Para dibujar los segmentos o para crear segmentos, vamos a usar un arco. Este para estar en el centro del lienzo. Añadamos esto ahí dentro. El radio que queremos que sea 230, que es igual que un fondo. Entonces necesitamos definir el punto inicial y final para cada una de las secciones. El punto de partida va a ser la posición de las 12 en punto. Entonces eso es 1.5 multiplicado por Math.pi. Eso es bastante sencillo. El ángulo final toma poco más de pensar. Tenemos 12 secciones diferentes en el círculo. Tenemos las seis secciones negras y las seis rojas. Una rotación completa del arco es 2 veces Math.pi. Podemos dividir estos dos, que es un círculo completo para ser dividido por las 12 secciones y esto nos da un volumen de 0.16666, y luego podemos sumar este valor a la 1.5 original. Iremos desde la posición de las 12 en punto, y luego vamos un poco más allá para crear los segmentos. Por lo que 0.16 más 1.5 nos da el valor de 1.6666 multiplicado por Math.pi, y eso debería darnos nuestros segmentos. Entonces necesitamos llenar los segmentos con el método de relleno para dibujar sobre el lienzo. Entonces llamemos a una función, justo debajo. Dibuja nuestros segmentos, y deben sumar los segmentos. Ahí vamos, dice el primero que necesitamos sumar. El punto de partida es esta línea aquí, que es 1.5 veces Math.pi. Cuando se agrega a este valor, 0.106, que es una doceava parte del radio del lienzo, que es el punto final justo aquí. Esa es nuestra primera sección dibujada al lienzo. En lugar de escribir todo este código una y otra vez, una forma más sencilla de hacerlo es usar un for-loop. Vamos a rodear toda la función con un for-loop. Empecemos solo con la línea de función, y luego terminemos después de dibujar segmentos. Simplemente sangraré la sección. Ese es el for-loop básico, y para evitar aplastar el navegador, solo dejaremos el for-loop vacío por ahora. Pero podemos seguir adelante y agregar el translate y rotar, que quieres que se realice en cada bucle. Debajo de dibujar segmentos, y aún dentro del bucle vamos a agregar un método de traducción, ctx.translate. Voy a traducir al centro del lienzo para cada rotación. Si no usamos translate primero, el punto de rotación es el origen del lienzo, que es la esquina superior izquierda. Asegúrese de agregar este lieno.ancho y lieno.altura dividido por 2. Entonces realmente queremos que se rote el segmento. Quiero que esto se rote 60 grados en cada bucle. Recuerda que usar rotar es en radianes, por lo que para convertir a grados, multiplicamos el valor por Math.Pi dividimos por 180. Entonces, por último, tenemos que llamar a traducir de nuevo para restablecer la posición de nuevo al origen. Queremos traducir esto en negativo 300, y traduce el origen de nuevo a 00. Por lo que cada vez que llamamos a este traductor, no tenemos ningún problema. Ahora podemos seguir adelante y crear el resto del for-loop. Simplemente voy a [inaudible] el for-loop o agregamos las condiciones para que no terminemos causando un enamoramiento dentro de CodePen. En primer lugar, vamos a crear nuestra variable de i es igual a cero, por lo que estos son los puntos de inicio de bucle. Ya tenemos un segmento dibujado a la pantalla desde la función original. Repitamos esto cinco veces más usando i es menor a seis. Entonces para aumentar esta una vez en cada bucle, usamos i plus. Podemos seguir adelante y [inaudible] este for-loop, y luego podemos correr. Ahí lo tenemos. Entonces eso funciona exactamente como queremos. Del mismo modo que un breve recapitulación, creamos un círculo de fondo rojo utilizando el método de arco. Entonces llamamos a una función llamada dibujar segmentos, y luego esta función dibujó una sección negra sobre el lienzo. Después rodeamos la función con un for-loop para repetir la sección negra cinco veces más, y en cada rotación rotamos el segmento 60 grados, y también en cada rotación, traducimos el origen del lienzo volver al centro en lugar de la posición predeterminada en la parte superior izquierda. Entonces después de cada rotación lo traducimos de vuelta para que no obtuviéramos ningún problema. Esa es otra pequeña mirada a bucear con el lienzo. Vuelve en el siguiente video, donde tomaremos lo que acabamos de dibujar y agregaremos algunos efectos de animación. 23. Un paso más allá: Hacer animación: Bienvenidos de vuelta chicos. En el último video, creamos este bloque y patrón rojo, que se puede ver en el lado derecho. Esto lo logramos creando un fondo rojo, y luego usamos un bucle for para dibujar los segmentos de bloque y luego hicimos un bucle redondo y lo repetimos seis veces. En este video, vamos a avanzar un paso más allá y echar un vistazo a la animación. En particular, vamos a echar un vistazo al método de intervalo establecido, que va a girar abierto, y los resultados finales se verían algo así. En realidad no es tan difícil crear este efecto cuando se usa el intervalo establecido. Empecemos por crear su propia pluma. Para el último video, y voy a llamar a esto animado, así como así. Podemos reutilizar todo el código del último video. Lo que básicamente vamos a hacer es envolver todo el código existente dentro de una función y luego pasar esta función al método de intervalo establecido en un retardo de tiempo especificado. Para empezar, necesitamos envolver el código existente dentro de una función. Justo debajo de nuestra variable de contactos, crea una función, y esto lo vas a llamar rotar. Entonces necesitamos agregar las llaves, así que agrega la llave rizada de apertura. Entonces justo abajo en la parte inferior, podemos agregar la llave de cierre, justo aquí. Vuelvo a la cima. Solo necesitamos agregar una o dos líneas dentro de esta función solo para que funcione correctamente. El primero que tenemos que hacer es crear los puntos de referencia en el centro del Lienzo. Usemos ctx.translate. Todo lo que queremos hacer es traducir al centro del lienzo, igual que lo hemos hecho muchas veces antes. Añadamos estos dentro de los corchetes. Ahora tenemos el punto de referencia en el centro del lienzo. Entonces a continuación queremos crear un método de rotación. Vamos a rotar un grado cada vez que se llame a un método de intervalo establecido. Vamos a sumar Math.Pi dividido por 180, y este es el equivalente de un grado. Entonces al igual que hicimos en el último video donde traducimos, rotamos, y luego traducimos de vuelta al origen, necesitamos agregar una segunda traducción para traducir de nuevo al origen en cada rotación. Podemos hacer lo mismo que el primero, pero en cambio, podemos usar el negativo solo para que volvamos al origen. Esto se traduce en la parte superior, luego puede moverse a la posición correcta. Sólo voy a sangrar este código así como eso. Entonces para que esto funcione realmente, también en realidad causa la rotación justo por encima de la última llave rizada, que es para la función de rotación. Necesitamos agregar intervalo establecido, y luego toma en dos parámetros. El primero es la función de rotación, que se creará. Se puede ver que va realmente más rápido. El segundo parámetro es el retardo de tiempo especificado en milisegundos. Vamos a cambiar eso a 30, y podemos ralentizarlo un poco. Por supuesto esto se puede cambiar a ti y si quieres lo prefieres. Cambiar a 300 lo hace realmente lento, así que vamos a cambiar por ahí. En realidad es bastante simple crear animación usando el intervalo establecido. Tan solo para recapitular, utilizamos el dibujo del último video y lo rodeamos dentro de una función de rotación. Agregamos una, dos líneas de código. Empezamos con el método de traducción, que aseguraba que el punto de referencia estuviera en el centro del Lienzo. Después rotamos un grado, se llama a cada intervalo de tiempo establecido, y luego nos aseguramos de que volviéramos a traducir al origen que no causara ningún problema cada vez que nos movemos al centro. Después pasamos en la función de rotación para establecer intervalo y luego dejar de que vaya de muy rápido. Agregamos 30 milisegundos de retraso solo para frenar las cosas, así como así. Es así como podemos usar set interval para crear una animación. Ahora pasaremos al proyecto final, o divertirnos un poco dibujando una cara de mickey mouse. Te veré ahí. 24. Proyecto final: introducción: Por lo que una gran felicitación de mi parte por llegar al final de este curso. Por lo que como un poco de ejercicio divertido, me gustará desafiarte a dibujar un rostro de Mickey Mouse. Ahora no hace falta que sea perfecto, toda la idea es solo darte algo con lo que practicar, lo que implica algunas de las técnicas que miramos a lo largo de este curso y además te da la oportunidad de pensar en las cosas a ti mismo en lugar de escribir junto conmigo. Entonces esto es lo que se me ocurre y esto es lo que me gustaría que crearas. Por lo que recomendaría encontrar una imagen simple de Mickey Mouse, solo para copiar de. Entonces un pequeño consejo que puede encontrar útil es antes de dibujar realmente las curvas para mucho de la cara, posible que lo encuentre mucho fácil creando algunos arcos pequeños como puntos de referencia. Por ejemplo, el punto de inicio y final de una curva, y esto es lo que hago al crear este ejemplo y tener estos puntos de referencia a mano realmente lo hace mucho más fácil al dibujar las curvas. Así que adelante y pasa un poco de tiempo tratando de replicar esto, y no te preocupes si sí luchas con alguno de estos caminos. Porque en el siguiente video, te mostraré la solución a cómo creé esto. Así que buena suerte. 25. Proyecto final: ¡Dibujar un Mickey Mouse!: Bienvenidos de vuelta a todos. Ojalá tuvieras algún éxito con este reto y sí compartas lo que has creado, y me encantaría verlos. Ahora te voy a llevar a través exactamente de lo que hice para crear esto, si acaso estás teniendo algún problema en el camino. El primero que hice fue crear una función llamada addreferencePoints, y esta función contenía todos los puntos de referencia que se pueden ver en el lado derecho. Creo estos puntos de referencia para hacer la vida un poco más fácil a la hora de crear los arcos y también las curvas, y de éstos, la función uno por uno, tal como dibujaríamos en las curvas más abajo en el código. Abajo por la parte inferior fuera de la función, esta es la llamada a la función para dibujar realmente todos los puntos de referencia en la pantalla, y la razón por la que todos los puntos de referencia están contenidos en la función es para que simplemente podamos comentar todos la llamada a la función cuando queremos eliminarlos, así como así. Empecé creando un ancho de línea de tres píxeles, y luego un camino, y luego me puse a trabajar en la parte superior del contorno de la cabeza. Utilizamos el método del arco para dibujar el lado exterior de la cabeza en los puntos inicial y final, que hemos añadido dentro de aquí. Entonces lo siguiente que hice, fue crear la oreja izquierda. Basta con comentar esta sección hacia fuera. Se creó un arco una vez más usando 2 veces Math.pi para crear un círculo completo. Seguidamente pasé a repetir para la oreja del lado derecho. medida que avanzas por este proyecto, notarás que muchas de las coordenadas son simétricas. Tenemos una línea por el centro que es 300 píxeles por lo que muchas de las coordenadas son iguales en el lado izquierdo, ya que tienes al lado derecho, así que es solo un caso de trabajar por un lado, y luego es mucho más fácil crear lo mismo en el otro. Después empezamos a movernos dentro de la cara. Tenemos la interfaz, que es el arco superior izquierdo y el arco superior derecho. puedes ver he hecho un comentario que las coordenadas a las que nos referimos son los puntos 1, 2, y 3 que está disponible dentro de la función arriba en la parte superior. Hemos creado estos puntos primero y después los hemos añadido dentro del método BezierCurveTo. Siguiente paso creo los puntos de referencia para la mejilla izquierda y también para la mejilla derecha. Ya mencioné antes sobre la línea simétrica, que tiene 300 píxeles de ancho en el eje x. Entonces podemos usar esta línea para asegurarnos de que cada lado de la cara sea parejo. El mejilla izquierda es de 40 píxeles menos de 300, la mejilla derecha es de 40 píxeles más alta, y esto crea un efecto simétrico. Entonces a continuación me muevo hasta la barbilla. Para crear este efecto, movemos el lápiz a la ubicación especificada, y esta vez usamos un método QuadraticCurveTo en lugar de un BezierCurve, simplemente porque un punto de control era suficiente para la sección, y eso es común a todos los siguientes sección. Esta parte es la curva que se sienta por encima de la nariz, y los ojos descansan en la parte superior. Nuevamente, porque esta es una línea simple, utilizamos una QuadraticCurve, y ahora tenemos esta curva. Ahora tenemos una posición para trabajar a los ojos, por lo que la izquierda, en el ojo derecho, acabamos de sumar los siguientes, y estos son los contornos. Usé un método de elipse, que aún no hemos mirado en este curso, pero hace que sea mucho más fácil que tratar de usar cierto tipo de curva para crear esto. Yo he agregado en los parámetros justo arriba, si quieres echarle un vistazo a esos. Tenemos un centro x e y, al igual que cuando se usa un arco. Tenemos el radio x e y, por lo que el radio es el eje mayor, y el radio y es el eje menor. También podemos agregar una rotación a la elipse, esto es en radianes. Nosotros somos entonces el inicio y endAngle, y tienen un parámetro opcional al final, si queremos que se dibuje en sentido horario o antihorario. Esos son los contornos de los ojos. Después utilizamos el mismo método de elipse para dibujar la nariz, y luego retrocedemos a la curva cuadrática, al arco para la boca. Hay dos arcos diferentes que vamos a crear. Una es la parte superior superior de la boca y luego tenemos la parte inferior de la boca. Para agregar algún detalle a la lengua, creamos dos QuadraticCurvetos más para dar el efecto de lengua dentro de la boca. Entonces lo siguiente que hice fue crear una curva justo al final de cada sección de la boca, así como así. Todos estos artículos tienen el efecto trazo, por lo que agregamos el trazo, justo en la parte inferior de todos estos. Entonces necesitamos comenzar un nuevo camino, y la razón por la que necesitamos hacerlo es porque todos los elementos de aquí tienen un relleno en lugar de un trazo. En primer lugar, tenemos el ojo izquierdo, y nuevamente usamos el método de elipse, pero esta vez agregamos un poco de ángulo solo para crear el efecto que estamos buscando. Después repetimos en el lado derecho para el ojo derecho, y luego dibujamos todos estos al Lienzo con el método de película al final. Entonces, por último, agregamos algo de texto al final justo con las palabras de Mickey Mouse, y agregamos algunas alineaciones básicas y también algunas fuentes y rellenos de color. Es así como creo mi cara de Mickey Mouse y recuerdo número no hay forma correcta o incorrecta de hacer esto. Todo el mundo toma diferentes enfoques, pero lo principal es que logras dibujar algo que se asemeja a Mickey Mouse. Eso es todo para el final de este proyecto. Por favor, sí comparte lo que has creado. Gracias por mirar y adiós por ahora. 26. Gracias: Gracias por acompañarme en este curso. Espero que lo hayas disfrutado y espero que hayas aprendido mucho de ello. Hemos cubierto tanto terreno incluyendo cómo configurar el Lienzo. Después miramos el scripting básico sobre cómo dibujar formas como rectángulos. Cubrimos cómo entender las coordenadas de Lienzo. También miramos las líneas y caminos y lo importante que era marchar hasta píxeles, para crear bordes de línea nítidos. Miramos otras diversas técnicas como esquinas y metros, arcos, y círculos. Cómo agregar texto al Lienzo y también gradientes. Terminamos la sección básica de Canvas agregando imágenes al Lienzo y también sartenes y sombras. Después nos dimos un poco al pasar al siguiente apartado, donde empezamos a mirar diversos tipos de curvas diferentes, como Bezier y curvas cuadráticas. También cubrimos los métodos de guardar e instalar y cómo utilizarlos correctamente. A la par de diversas transformaciones como escalar, girar, y traducir. Ahora debes entender cómo trabajar con píxeles y cómo acceder a los datos de píxeles de una imagen, y luego usar esos datos de píxel para manipular la imagen para crear efecto como convertir una imagen en escala de grises. También miramos cómo Looping puede hacer que los trabajos repetitivos sean mucho más simples y también cómo animar nuestros dibujos para realmente darles vida. Entonces ojalá, al final del curso, seas capaz de tener algún éxito, dibujamos en la cara de Mickey Mouse, para poner en práctica todo lo que has aprendido del curso. Entonces para mí, adiós por ahora, y ojalá te vuelva a ver en el futuro curso. 27. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare. Además, sígueme para cualquier actualización y también para estar informado de cualquier nueva clase a medida que estén disponibles. Entonces gracias una vez más. Buena suerte. Esperemos que te vuelva a ver en una futura clase.