Tutorial de dibujo de lona HTML5 (9) - Dibuja rectángulos y círculos en lienzo

Este artículo hablará sobre el método de dibujar rectángulos y círculos en lienzo, pertenecen a gráficos básicos. Por supuesto, hay más que solo ellos en gráficos básicos, pero en el lienzo, solo dibujar rectángulos y círculos no requiere otras simulaciones.

Fillrect puede llenar directamente un rectángulo, y el estilo de llenado es el estilo que está configurando actualmente; Del mismo modo, Strokerect es para acariciar directamente un rectángulo

Sus parámetros son consistentes, a su vez (punto de partida x coordenada, punto de partida y, ancho del rectángulo, altura del rectángulo). El punto de partida aquí, nota, se refiere al punto en la esquina superior izquierda del rectángulo.

Por lo general, los usamos para hacer cosas simples, y solo pueden hacer cosas simples. ¿Por qué? Debido a que las palabras que los gráficos que dibujan no tienen caminos, salieron directamente.

Por ejemplo, si primero llena un rectángulo con Fillrect, entonces desea acariciar el rectángulo. Si usa Stroke (), no habrá efecto, porque aunque hay un rectángulo en este momento, no hay camino.

Si está ansioso por acariciar este rectángulo, puede usar Strokerect () para acariciar un rectángulo en la misma posición, pero en realidad son posiciones independientes y superpuestas.

CTX.FillRect (200,100,50,40);

CTX.Strokerect (200,100,50,40);

Si queremos un rectángulo que se llene y acaricie, sin duda será engorroso usar Fillrect y Strokerect al mismo tiempo. Entonces, en este caso, generalmente usamos el siguiente método.

Los parámetros de RECT no son diferentes de Fillrect y Strokerect. La diferencia es que solo dibujan el camino, y tienes que completar el trazo o llenarse más tarde.

CTX.rect (300,100,50,40);

ctx.stroke ()

ctx.fill ();

¿Cuáles son los beneficios de hacer esto? En el artículo anterior, mencioné que el relleno o el accidente cerebrovascular consume muchos recursos, por lo que a menudo (como bucles) necesitamos dibujar cientos de caminos a la vez, y luego accidente cerebrovascular o llenar. En este momento, use Rect para dibujar la ruta y luego llénelo nuevamente, lo que evita el problema del relleno o trazo de Strokerec cada vez.

Por supuesto, también puede usar 4 Linesto Draw a Rectangle como mi tutorial sobre líneas de dibujo. Pero esto es innecesario, consulte ese artículo para más detalles.

El cielo no tiene ojos. De hecho, el lienzo no tiene una función real que pueda dibujar directamente un círculo. Lo que dibuja es en realidad un arco de 360 ​​grados, que parece un círculo.

Hemos mencionado la función del lienzo que dibuja un arco antes, es decir, arco. Lo usamos para dibujar un círculo:

CTX.ARC (300+25,100+20,20,0, Math.pi*2);

ctx.stroke ()

ctx.fill ();

Este arco es el mismo que RECT, y el camino se dibuja, y el relleno o el accidente cerebrovascular deben completarse más tarde.

Pero debe tenerse en cuenta que el juicio de posición de un círculo es diferente al de un rectángulo. Determinamos su posición con la esquina superior izquierda del rectángulo como punto de partida, pero generalmente determinamos la posición del círculo con el centro del círculo.

Si desea dibujar un conjunto de rectángulos y círculos que se centren horizontalmente y verticalmente, entonces debe recordar no considerar el punto de partida del rectángulo como el punto de partida del círculo: ¡el punto de partida del círculo es el centro del círculo!

Olvídalo, será mejor que te dé una fórmula ahora, círculos y rectángulos alineados, coordenadas del centro del círculo = coordenadas de los rectángulos + la mitad del ancho y la altura de los rectángulos.

Es decir, el centro del círculo x = rectángulo x + ancho del rectángulo/2, y el círculo y = rectángulo y + altura del rectángulo/2. De esta manera están absolutamente alineados.

Aunque el arco no es tan fácil de usar como un método para dibujar círculos directamente, el método de dibujar círculos directamente que imaginé solo requiere 3 parámetros, a saber, las coordenadas centrales del círculo, es decir, el radio, sino que el arco no solo puede dibujar círculos, sino también dibujar semicircules, por lo que es más potente y puede usarse.

Como hay un círculo, debe haber una elipse, pero ni siquiera hay una función regular para dibujar un círculo en el lienzo, y mucho menos una elipse. Por lo tanto, el dibujo de elipses debe simularse utilizando otros métodos. Esto es bastante complicado, por lo que lo dejaré en el siguiente paso.