Comentario: 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 otros métodos para simular. Los amigos interesados pueden aprender al respecto
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.lienzo dibujar rectángulos
1. Fillrect y Strokerect
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.
2, rect
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.
3. Lineto
Por supuesto, también puede usar 4 Linesto Draw a Rectangle como mi tutorial de dibujo de línea. Pero esto es innecesario, consulte ese artículo para más detalles.
Círculo de dibujo de lona
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 para dibujar 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, te daré 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 directamente círculos que imaginé solo requiere 3 parámetros, a saber, las coordenadas del centro, es decir, el radio, sino que el arco no solo puede dibujar círculos, sino también dibujar semicírculos, 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.