Antes de que podamos comenzar a dibujar, necesitamos hablar sobre la cuadrícula de lienzo o el espacio de coordinación . La plantilla HTML en la página anterior tenía un elemento de lona de 150 píxeles de ancho y 150 píxeles de alto. He dibujado esta imagen con la cuadrícula predeterminada superpuesta. Normalmente, 1 unidad en la cuadrícula corresponde a 1 píxel en el lienzo. El origen de esta cuadrícula se coloca en la esquina superior izquierda (coordenada (0,0)). Todos los elementos se colocan en relación con este origen. Entonces, la posición de la esquina superior izquierda del cuadrado azul se convierte en X píxeles desde la izquierda e píxeles y desde la parte superior (coordenada (x, y)). Más adelante en este tutorial veremos cómo podemos traducir el origen a una posición diferente, rotar la cuadrícula e incluso escalarla. Por ahora nos quedaremos con el valor predeterminado.
Antes de comenzar realmente, necesitamos explorar la cuadrícula o coordinar el espacio del lienzo. Hay 150 píxeles de ancho y 150 píxeles de alto en la plantilla HTML en la página anterior. Superpongo la cuadrícula predeterminada en la pantalla, como se muestra en la imagen a la derecha. Por lo general, una celda de la cuadrícula corresponde a un píxel en el lienzo. El origen de la cuadrícula se coloca en la esquina superior izquierda (coordenadas (0,0)). Las posiciones de todos los objetos en la imagen son relativos a este origen. De esta manera, la posición del cuadrado azul en la esquina superior izquierda es el píxel X desde el píxel izquierdo e y desde el lado superior (coordenadas (x, y)). En el siguiente tutorial, aprenderemos cómo mover el origen, rotar y escalar la cuadrícula. Pero ahora usaremos el estado predeterminado.
A diferencia de SVG, el lienzo solo admite una forma primitiva: rectángulos. Todas las demás formas deben crearse combinando uno o más caminos. Afortunadamente, tenemos una colección de funciones de dibujo de ruta que permiten componer formas muy complejas.
A diferencia de SVG, el lienzo solo admite una forma básica: rectángulo, por lo que otras formas están compuestas de uno o más caminos. Afortunadamente, hay un conjunto de funciones de dibujo de ruta que nos permiten dibujar formas bastante complejas.
Primero veamos el rectángulo. Hay tres funciones que dibujan rectángulos en el lienzo:
Primero veamos el rectángulo. Hay tres funciones para dibujar rectángulos:
Fillrect (x, y, ancho, altura): dibuja un rectángulo relleno Strokerect (x, y, ancho, altura): dibuja un contorno rectangular ClearRect (x, y, ancho, altura): borra el área especificada y lo hace completamente transparenteCada una de estas tres funciones toma los mismos parámetros. X e Y especifican la posición en el lienzo (en relación con el origen) de la esquina superior izquierda del rectángulo. El ancho y la altura son bastante obvios. Veamos estas funciones en acción.
Todos aceptan cuatro parámetros, x e y especifican la posición de la esquina superior izquierda del rectángulo (en relación con el origen), y el ancho y la altura son el ancho y la altura del rectángulo. Ok, tengamos algunas batallas prácticas.
A continuación se muestra la función Draw () de la página anterior, pero ahora he agregado las tres funciones anteriores.
La siguiente es la función Draw () en la plantilla en la página anterior, pero se agregan las tres funciones anteriores.
Ver ejemplo
function draw () {var canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); CTX.FillRect (25,25,100,100); CTX.Learrect (45,45,60,60); CTX.Strokerect (50,50,50,50); }}El resultado debería verse algo así como la imagen a la derecha. La función Fillrect dibuja un gran cuadrado negro de 100x100 píxeles. La función ClearRect elimina un cuadrado de 60x60 píxeles del centro y finalmente el Strokerect dibuja un contorno rectangular 50x50 píxeles dentro del cuadrado despejado. En las siguientes páginas veremos dos métodos alternativos para la función ClearRect y también veremos cómo cambiar el estilo de color y trazo de las formas renderizadas.
El resultado debe ser el mismo que el de la derecha. La función Fillrect dibuja un rectángulo negro grande (100x100), la función ClearRect borra el cuadrado de tamaño 60x60 en el medio y luego la función Strokerect describe un borde de rectángulo de 50x50 en el espacio despejado. En la página siguiente, veremos otros dos métodos similares a la función ClearRect, así como cómo cambiar el color de llenado y borde de la figura.
A diferencia de las funciones de ruta que veremos en la siguiente sección, las tres funciones rectangulares se basan inmediatamente en el lienzo.
A diferencia de la función de ruta en la siguiente sección, los efectos de estas tres funciones se reflejarán inmediatamente en el lienzo.
Para hacer formas usando rutas, necesitamos un par de pasos adicionales.
A diferencia de dibujar un rectángulo, dibujar una ruta requiere algunos pasos adicionales.
beginpath () ClosePath () ataque () llenar ()El primer paso para crear una ruta es llamar al método StartingPath. Internamente, las rutas se almacenan como una lista de subcanjes (líneas, arcos, etc.) que en conjunto forman una forma. Cada vez que se llama a este método, la lista se restablece y podemos comenzar a dibujar nuevas formas.
El primer paso es crear una ruta con BeginPath. En la memoria, las rutas se almacenan en forma de un conjunto de subpatas (líneas, arcos, etc.), que juntos forman un gráfico. Cada vez que se llama a BeginPath, el grupo Subpath se restablece y se puede dibujar un nuevo gráfico.
El segundo paso es llamar a los métodos que realmente especifican las rutas a dibujar. Veremos estos en breve.
El segundo paso es dibujar la parte del camino, que veremos pronto.
El tercero, y un paso opcional, sería llamar al método ClosePath. Este método intenta cerrar la forma dibujando una línea recta desde el punto actual hasta el inicio. Si la forma ya se ha cerrado o solo hay un punto en la lista, esta función no hace nada.
El tercer paso es llamar al método ClosePath, que intentará conectar el punto final actual al punto final inicial con una línea recta para cerrar la ruta, pero si el gráfico ya está cerrado o solo hay un punto, no hará nada. Este paso no es necesario.
El paso final será llamar a los métodos de accidente cerebrovascular y/o relleno. Llamar a uno de estos realmente atraerá la forma al lienzo. El trazo se usa para dibujar una forma describida, mientras que el relleno se usa para pintar una forma sólida.
El último paso es llamar al método de trazo o relleno, y en este momento, el gráfico realmente se dibuja en el lienzo. La carrera es el borde que dibuja la figura, el relleno la llenará con una figura sólida.
Nota: Al llamar al método de relleno, cualquier forma abierta se cerrará automáticamente y no es necesario usar el método ClosePath. Nota: Cuando se llama al relleno, la ruta abierta se cerrará automáticamente sin llamar a ClosePath.El código para un dibujo de forma simple (un triángulo) se vería algo así.
El código para dibujar una figura simple (como un triángulo) es el siguiente.
ctx.beginpath (); ctx.moveto (75,50); ctx.lineto (100,75); ctx.lineto (100,25); ctx.fill ();
Una función muy útil, que en realidad no dibuja nada, pero es parte de la lista de rutas descrita anteriormente, es la función Moveto. Probablemente pueda pensar en esto como levantar un bolígrafo o lápiz de un lugar en un trozo de papel y colocarlo en el siguiente.
Moveto es un método muy útil. Aunque no se puede usar para dibujar nada, es parte de una forma práctica de dibujar caminos. Puede pensar en ello como el proceso de levantar la pluma y moverlo de un punto a otro.
Moveto (x, y)La función Moveto toma dos argumentos, x e y, que son las coordenadas del nuevo punto de partida.
Acepta X e Y (nuevas posiciones de coordenadas) como parámetros.
Cuando se inicializa el lienzo o se llama al método BeginPath, el punto de partida se establece en la coordenada (0,0). En la mayoría de los casos, usaríamos el método Moveto para colocar el punto de partida en otro lugar. También podríamos usar el método Moveto para dibujar rutas no conectadas. Echa un vistazo a la cara sonriente a la derecha. He marcado los lugares donde utilicé el método Moveto (las líneas rojas).
Cuando se inicializa el lienzo o se llama a BeginPath, la configuración de coordenadas inicial es el origen (0,0). En la mayoría de los casos, utilizamos el método Moveto para mover las coordenadas iniciales a otros lugares, o para dibujar rutas discontinuas. Mire la cara sonriente a la derecha, la línea roja es la trayectoria de moverse usando Moveto.
Para probar esto por sí mismo, puede usar el fragmento de código a continuación. Simplemente péguelo en la función de dibujo que vimos anteriormente.
Pruebe el siguiente código y péguelo en la función de dibujo que usó antes para ver el efecto.
ctx.beginpath (); ctx.arc (75,75,50,0, math.pi*2, verdadero); // Circuito exteriorx.moveto (110,75); ctx.arc (75,75,35,0, math.pi, falso); // boca (en sentido horario) ctx.moveto (65,65); ctx.arc (60,65,5,0, math.pi*2, verdadero); // Eyectx.Moveto izquierdo (95,65); CTX.ARC (90,65,5,0, Math.pi*2, verdadero); // right Eyectx.stroke ();Nota : Retire los métodos Moveto para ver las líneas de conexión. Nota : Para una descripción de la función ARC y sus parámetros se ve a continuación. Nota: Puede comentar el método Moveto para observar las líneas conectadas. Nota: El uso del método ARC se muestra a continuación.
Para dibujar líneas rectas usamos el método Lineto.
Utilizamos el método Lineto para dibujar líneas rectas.
Lineto (x, y)Este método toma dos argumentos: x e y, que son las coordenadas del punto final de la línea. El punto de partida depende de rutas dibujadas anteriores, donde el punto final de la ruta anterior es el punto de partida para lo siguiente, etc. El punto de partida también se puede cambiar utilizando el método Moveto.
El método Lineto acepta las coordenadas (x, y) del punto final como parámetro. La coordenada inicial depende de la ruta anterior. El punto final de la ruta anterior es el punto de partida de la ruta actual. La coordenada inicial también se puede configurar a través del método Moveto.
En el ejemplo de abajo se dibujan dos triángulos, uno lleno y otro esbozado. (El resultado se puede ver en la imagen a la derecha). Primero se llama al método BeginPath para comenzar una nueva ruta de forma. Luego usamos el método Moveto para mover el punto de partida a la posición deseada. Debajo de esto se dibujan dos líneas que componen dos lados del triángulo.
El ejemplo (como se muestra en la imagen a la derecha) son dos triángulos, uno lleno de color sólido y un borde dibujado. Primero, llame al método BeginPath para crear una nueva ruta, luego use el método Moveto para mover la coordenada inicial a la posición deseada y luego dibuje dos líneas rectas para formar los dos lados del triángulo.
Notarás la diferencia entre el triángulo lleno y acarreo. Esto es, como se mencionó anteriormente, porque las formas se cierran automáticamente cuando se llena una ruta. Si hubiéramos hecho esto por el triángulo Stroked, solo se habrían dibujado dos líneas, no un triángulo completo.
Puede notar la diferencia entre triángulos de dibujo de relleno y strok. Como se mencionó anteriormente, la ruta que usa el relleno se cerrará automáticamente, pero no será con trazo. Si la ruta no está cerrada, solo se dibujarán dos lados.
Ver ejemplo
// relleno triángulo ctx.beginpath (); ctx.moveto (25,25); ctx.lineto (105,25); ctx.lineto (25,105); ctx.fill (); // tick triangle ctx.beginpath (); ctx.moveto (125,125); ctx.lineto (125,45); ctx.lineto (45,125); ctx.closePath (); ctx.stroke ();
Para dibujar arcos o círculos usamos el método de arco. La especificación también describe el método Arcto, que es compatible con Safari pero no se ha implementado en los navegadores Gecko actuales.
Utilizamos el método ARC para dibujar arcos o círculos. El método Arcto también se incluye en la descripción estándar. Safari actualmente es compatible, pero los navegadores con sede en Gecko aún no se han implementado.
arco (x, y, radio, startangle, endangle, antidlock en el sentido de las agujas)Este método toma cinco parámetros: X e Y son las coordenadas del centro del círculo. Radius se explica por sí mismo. Los parámetros de inicio y endangle definen los puntos de inicio y finalización del arco en radianes. El ángulo de inicio y de cierre se miden desde el eje x. El parámetro en sentido antihorario es un valor booleano que cuando verdadero dibuja el arco en sentido antihorario, de lo contrario en sentido horario.
El método acepta cinco parámetros: x, y es la coordenada central, el radio es el radio, el inicio y el endangle son los radianes de inicio y final (según el eje x como referencia), el antihorario es verdadero, lo que significa en sentido antihorario y en sentido antihorario.
ADVERTENCIA : En las construcciones beta de Firefox, el último parámetro es en sentido horario. La versión final admitirá la función como se describió anteriormente. Todos los scripts que usan este método en su formulario actual deberán actualizarse una vez que se lance la versión final.Advertencia: en la versión beta de Firefox, el último parámetro es en sentido horario, y la versión final no lo es. Por lo tanto, si está actualizando de beta a distribución, debe hacer los cambios correspondientes.
Nota : los ángulos en la función de arco se miden en radianes, no grados. Para convertir los grados en radianes, puede usar la siguiente expresión de JavaScript: var radians = (math.pi/180)*grados.Nota: El ángulo utilizado en el método de ARC está en unidades de radianes en lugar de grados. La conversión directa de grados y radianes se puede usar con esta expresión: var radians = (math.pi/180)*grados;.
El siguiente ejemplo es un poco más complejo que los que hemos visto anteriormente. He dibujado 12 arcos diferentes, todos con diferentes ángulos y rellenos. Si hubiera escrito este ejemplo al igual que la cara sonriente anterior, en primer lugar, esto se habría convertido en una lista muy larga de declaraciones y, en segundo lugar, al dibujar arcos, necesitaría saber cada punto de partida. Para los arcos de 90, 180 y 270 grados, como los que usé aquí, esto no sería un gran problema, pero para los más complejos se vuelve demasiado difícil.
Este ejemplo es más complicado que lo que has visto antes. Dibuja 12 arcos diferentes con diferentes ángulos y estados de llenado. Si dibujo estos arcos con el método anterior de dibujar caras sonrientes, sería un gran código, y al dibujar cada arco, necesito saber la posición del centro del círculo. Por ejemplo, dibujar arcos de 90, 180 y 270 grados aquí también es un problema. Si los gráficos son más complicados, más difícil será implementarlos.
Los dos para bucles son para recorrer las filas y columnas de arcos. Para cada arco, comienzo una nueva ruta usando BeginPath. Debajo de esto, he escrito todos los parámetros como variables, por lo que es más fácil leer lo que está sucediendo. Normalmente, esta sería solo una declaración. Las coordenadas X e Y deben ser lo suficientemente claras. Radius y Startangle son fijos. El endangle comienza de 180 grados (primera columna) y se incrementa con pasos de 90 grados para formar un círculo completo (última columna). La declaración para el parámetro en sentido horario da como resultado que la primera y tercera fila se dibujen como arcos en sentido horario y la segunda y cuarta fila como arcos en sentido antihorario. Finalmente, la instrucción IF hace que los arcos de la mitad superior acaricie y los arcos de la mitad inferior llenen.
Aquí usamos dos para bucles para dibujar arcos con múltiples filas y columnas. Cada arco crea una nueva ruta utilizando el método BeginPath. Luego, en aras de una fácil lectura y comprensión, escribí todos los parámetros en formas variables. Es obvio que X e Y son las coordenadas del centro. Tanto Radius como Startangle son fijos, y Endangle comienza desde un semicírculo de 180 grados y se incrementa al círculo en modo de 90 grados. Antilock en sentido antiLocircuito depende del número de filas impares e incluso. Finalmente, la declaración IF se usa para juzgar que las dos primeras líneas se muestran como bordes, y las dos últimas líneas se llenan con el efecto.
para (i = 0; i <4; i ++) {for (j = 0; j <3; j ++) {ctx.beginpath (); var x = 25+j*50; // x coordenada var y = 25+i*50; // y coordinar var radio = 20; // arco radio var startangle = 0; // punto de partida en círculo var endangle = math.pi+(math.pi*j)/2; // Punto final en el círculo var anticlockwise = i%2 == 0? falso: verdadero; // CTX.ARC en sentido horario o antihorario (x, y, radio, startangle, endangle, en sentido antihorario); if (i> 1) {ctx.fill (); } else {ctx.stroke (); }}}El siguiente tipo de rutas disponibles son las curvas Bézier, disponibles en la variedad cúbica y cuadrática. Estos se usan generalmente para dibujar formas orgánicas complejas.
El siguiente camino a introducir es la curva Bezier, que puede estar en formas cuadráticas y cúbicas, y generalmente se usa para dibujar formas complejas y regulares.
QuadraticCurveto (CP1X, CP1Y, X, Y) // Break en Firefox 1.5 (vea el trabajo a continuación) Beziercurveto (CP1X, CP1Y, CP2X, CP2Y, X, Y)La diferencia entre estos se puede describir mejor utilizando la imagen a la derecha. Una curva cuadrática de Bézier tiene un comienzo y un punto final (puntos azules) y solo un punto de control (puntos rojos), mientras que una curva de Bézier cúbica usa dos puntos de control.
Vea la figura a la derecha para la diferencia entre las dos líneas de código anteriores. Todos tienen un punto de partida y un punto final (punto azul en la figura), pero la curva de Bezier cuadrática tiene solo un punto de control (rojo)) y la curva de Bezier cúbica tiene dos.
Los parámetros X e Y en ambos métodos son las coordenadas del punto final. CP1X y CP1Y son las coordenadas del primer punto de control, y CP2X y CP2Y son las coordenadas del segundo punto de control.
Los parámetros x e y son las coordenadas del punto final, CP1X y CP1Y son las coordenadas del primer punto de control, y CP2X y CP2Y son las segunda.
El uso de curvas cuadráticas y cúbicas de Bézier puede ser bastante desafiante, porque a diferencia del software de dibujo vectorial como Adobe Illustrator, no tenemos comentarios visuales directos sobre lo que estamos haciendo. Esto hace que sea bastante difícil dibujar formas complejas. En el siguiente ejemplo, dibujaremos algunas formas orgánicas simples, pero si tiene el tiempo y, sobre todo, la paciencia, se pueden crear formas mucho más complejas.
El uso de curvas cuadráticas y cúbicas de Bezier es bastante desafiante porque no hay retroalimentación visual instantánea como en el software Vector Drawing Adobe Illustrator. Porque es más problemático dibujar gráficos complejos. Pero si tiene tiempo y lo más importante, puede dibujar cualquier gráfico complejo. Dibujemos una figura simple y regular a continuación.
No hay nada muy difícil en estos ejemplos. En ambos casos vemos una sucesión de curvas que se dibujan que finalmente dan como resultado una forma completa.
Estos ejemplos son relativamente simples. Todo lo que dibujamos son gráficos completos.
// curvas cuadrátricas ejemplox.beginpath (); ctx.moveto (75,25); ctx.quadraticcurveto (25,25,25,62.5); ctx.quadraticcurveto (25,100,50,100); ctx.quadraticcurveto (50,, 50, 120,30,125); ctx.quadraticcurveto (60,120,65,100); ctx.quadraticcurveto (125,100,125,62.5); ctx.quadraticcurveto (125,25,75,25); ctx.stroke ();
Es posible convertir cualquier curva cuadrática de Bézier en una curva cúbica de Bézier calculando correctamente ambos puntos de control cúbicos de Bézier desde el punto de control de Bézier cuadrático único, aunque el reverso no es cierto. Una conversión exacta de una curva cúbica de Bézier a una curva cuadrática de Bézier solo es posible si el término cúbico es cero, más comúnmente se usa un método de subdivisión para aproximar un Bézier cúbico usando múltiples curvas cuadráticas de Bézier.
A través del cálculo, dos puntos de control de la curva cúbica correspondiente pueden derivarse de un solo punto de control de la curva cuadrática, por lo que es posible convertir cuadrática en cúbico, pero de lo contrario. Es posible convertir a una curva bezier cuadrática solo si el término cúbico en una ecuación cúbica es cero. En general, se pueden usar múltiples curvas cuadráticas para aproximar la simulación de curvas de Bezier cúbicos a través de algoritmos de subdivisión.
// curvas de Bezier ejemplo.beginpath (); ctx.moveto (75,40); ctx.beziercurveto (75,37,70,25,50,25); ctx.beziercurveto (20,25,62.5,20,62.5); ctx.beziercurveto (20,800,800,8000 , 102,75,120); CTX.Beziercurveto (110,102,130,80,130,62.5); CTX.BeziERCURVETO (130,62.5,130,25,100,25); CTX.Beziercurveto (85,25,75,37,75,45);
Hay un error en la implementación de Firefox 1.5 de QuadatricCurVeto (). No dibuja una curva cuadrática, ya que solo llama a la misma función de la curva cúbica Beziercurveto () llamadas, y repitiendo el punto de control cuadrático único (x, y) se coordina dos veces. Por esta razón, QuadraticCurveto () arrojará resultados incorrectos. Si necesita el uso de QuadraticCurveto (), debe convertir su curva bézier cuadrática en una curva bézier cúbica usted mismo, por lo que puede usar el método Beziercurveto () que funciona.
En Firefox 1.5, la implementación de QuadatricCurVeto () es errónea. No dibuja directamente una curva cuadrática, pero llama a Beziercurveto (), donde ambos puntos de control son el punto de control único de la curva cuadrática. Por lo tanto, dibuja curvas incorrectas. Si tiene que usar QuadraticCurVeto (), debe convertir la curva cuadrática en una potencia cúbica por sí mismo, para que pueda usar el método Beziercurveto ().
var currentx, currenty; // set to last x,y sent to lineto/moveto/beziercurveto or quadraticcurvetofixed()function quadraticcurvetofixed( cpx, cpy, x, y ) { /* for the equations below the following variable name prefixes are used: qp0 is the quadratic curve starting point (you must keep this from your last point sent to moveto(), lineto(), or Beziercurveto ()). QP1 es el punto de control de la curva quadatric (este es el CPX, CPY que habría enviado a QuadraticCurVeto ()). QP2 es el punto de finalización de la curva cuadrática (este es los argumentos x, y que habría enviado a QuadraticCurveto ()). Convertiremos estos puntos para calcular los dos puntos de control cúbicos necesarios (los puntos de inicio/finalización son los mismos para las curvas cuadráticas y cúbicas. Las ecuaciones para los dos puntos de control cúbicos son: cp0 = qp0 y cp3 = qp2 cp1 = qp0 + 2/3 *(qp1-qp0) cp2 = cp1 + 1/3 *(qp2-qp0) en el código a continuación en el código a continuación en el siguiente código) en el código a continuación en el siguiente código). Y Términos para cada punto por separado. a) Reemplace las variables QP0X y QP0Y con CurrentX y Currenty (que * debe almacenar para cada Moveto/Lineto/Beziercurveto) b) Reemplace las variables QP1X y QP1Y con CPX y CPY (que habríamos pasado a cuádrásticos) c) reemplazar las variables QP2X y QP2Y con X y Y. que nos deja con: */ var cp1x = currentx + 2.0/ 3.0 *(cpx - currentx); var cp1y = currenty + 2.0/3.0*(cpy - currenty); var cp2x = cp1x + (x - currentx) /3.0; var cp2y = cp1y + (y - actualy) /3.0; // y ahora llamar a la curva de Bezier cúbico para funcionar Beziercurveto (CP1X, CP1Y, CP2X, CP2Y, X, Y); currentx = x; Currenty = y;}Además de los tres métodos que vimos anteriormente, que dibujan formas rectangulares directamente al lienzo, también tenemos un método RECT que agrega una ruta rectangular a la lista de rutas.
Además de los tres métodos mencionados anteriormente que pueden dibujar directamente rectángulos, también tenemos un método RECT utilizado para dibujar rutas de rectángulo.
rect (x, y, ancho, altura)Este método toma cuatro argumentos. Los parámetros X e Y definen la coordenada de la esquina superior izquierda de la nueva ruta rectangular. El ancho y la altura definen el ancho y la altura del rectángulo.
Acepta cuatro parámetros, x e y son sus coordenadas de la parte superior izquierda, y el ancho y la altura son su ancho y altura.
Cuando se ejecuta este método, el método Moveto se llama automáticamente con los parámetros (0,0) (es decir, restablece el punto de partida a su ubicación predeterminada).
Cuando se llama, el método Moveto se llamará automáticamente, por lo que la coordenada inicial se restaura al origen.
En todos los ejemplos en esta página, solo he usado un tipo de función de ruta por forma. Sin embargo, no hay absolutamente ninguna limitación de la cantidad o tipo de rutas que puede usar para crear una forma. Entonces, en este último ejemplo, he intentado combinar todas las funciones de camino para hacer un conjunto de personajes de juegos muy famosos.
Los ejemplos utilizados anteriormente usan solo un tipo de ruta, por supuesto, el lienzo no limitará el número de tipos de ruta utilizados. Entonces, veamos una ruta Hodgepodge.
No voy a ejecutar a través de este script completo, pero las cosas más importantes a tener en cuenta son la función redondeada y el uso de la propiedad Fillstyle. Puede ser muy útil y ahorro de tiempo para definir sus propias funciones para dibujar formas más complejas. En este script me habría llevado el doble de líneas de código que yo ahora.
Veremos la propiedad FillStyle con mayor profundidad más adelante en este tutorial. Aquí lo estoy usando para cambiar el color de relleno del negro predeterminado al blanco y hacia atrás nuevamente.
En todo el ejemplo, lo más notable es el uso de la función RoundedRect y la configuración de la propiedad FillStyle. Las funciones personalizadas son muy útiles para encapsular el dibujo de gráficos complejos. El uso de una función personalizada en este ejemplo guarda aproximadamente la mitad del código.
En los siguientes ejemplos, exploraremos el uso en profundidad de los atributos de estilo relleno. Aquí es usarlo para cambiar el color de relleno, de negro predeterminado a blanco, y luego volver a negro.
Ver el ejemplo
function draw () {var ctx = document.getElementById ('Canvas'). getContext ('2d'); redondeedrect (CTX, 12,12,150,150,15); Roundedrect (CTX, 19,19,150,150,9); redondeedrect (CTX, 53,53,49,33,10); redondeedrect (CTX, 53,119,49,16,6); redondeedrect (CTX, 135,53,49,33,10); redondeedrect (CTX, 135,119,25,49,10); ctx.beginpath (); CTX.ARC (37,37,13, Math.pi/7, -math.pi/7, verdadero); CTX.Lineto (31,37); ctx.fill (); para (i = 0; i <8; i ++) {ctx.fillrect (51+i*16,35,4,4); } para (i = 0; i <6; i ++) {ctx.fillrect (115,51+i*16,4,4); } para (i = 0; i <8; i ++) {ctx.fillrect (51+i*16,99,4,4); } ctx.beginpath (); ctx.moveto (83,116); CTX.Lineto (83,102); CTX.Beziercurveto (83,94,89,88,97,88); ctx.beziercurveto (105,88,111,94,111,102); CTX.Lineteto (111,116); ctx.lineteto (106.333,111.333); CTX.Lineteto (101.666,116); CTX.Lineteto (97,111.333); CTX.Lineteto (92.333,116); CTX.Lineteto (87.666,111.333); CTX.Lineteto (83,116); ctx.fill (); ctx.fillstyle = blanco; ctx.beginpath (); CTX.moveto (91,96); CTX.Beziercurveto (88,96,87,99,87,101); ctx.beziercurveto (87,103,88,106,91,106); CTX.Beziercurveto (94,106,95,103,95,101); CTX.Beziercurveto (95,99,94,96,91,96); ctx.moveto (103,96); CTX.Beziercurveto (100,96,99,99,99,101); CTX.Beziercurveto (99,103,100,106,103,106); CTX.Beziercurveto (106,106,107,103,107,101); CTX.Beziercurveto (107,99,106,96,103,96); ctx.fill (); ctx.fillstyle = negro; ctx.beginpath (); ctx.arc (101,102,2,0, math.pi*2, verdadero); ctx.fill (); ctx.beginpath (); CTX.ARC (89,102,2,0, Math.Pi*2, verdadero); ctx.fill (); ctx.fill (); CTX.ARC (89,102,2,0, Math.Pi*2, verdadero); ctx.fill (); ctx.fill (); } función redondeedDerect (ctx, x, y, ancho, altura, radio) {ctx.beginpath (); ctx.moveto (x, y+radio); ctx.lineto (x, y+altura-radio); ctx.quadraticCurveto (x, y+altura, x+radio, y+altura); ctx.lineto (x+ancho-radio, y+altura); ctx.quadraticCurveto (ancho x+, y+altura, x+ancho, y+altura-radius); ctx.lineto (x+ancho, y+radio); ctx.quadraticCurveto (x+ancho, y, x+ancho-radio, y); ctx.lineto (x+radio, y); ctx.quadraticCurveto (x, y, x, y+radio); ctx.stroke ();}