Tutorial de dibujo de lienzo HTML5 (10) - Desconimera la superficie en líneas para simular un rectángulo redondeado

Comentario: En el artículo anterior, hablé sobre el método de dibujar rectángulos y círculos. Todos tienen funciones de dibujo de lienzo nativo que se pueden completar. El rectángulo redondeado mencionado en este artículo solo se puede simular a través de otros métodos. Utilizamos la capacidad de dividir la superficie en líneas, y es fácil encontrar que el rectángulo redondeado está realmente compuesto por 4 curvas tipo gancho. Los amigos interesados ​​pueden aprender al respecto.

Para un rectángulo redondeado normal, supongamos primero que las esquinas redondeadas de sus cuatro esquinas son las mismas, porque esto es más fácil de dibujar. Utilizamos la capacidad de dividir la superficie en líneas y es fácil descubrir que el rectángulo redondeado está realmente compuesto por 4 curvas tipo gancho.

Hablando de ganchos, si ha leído mi artículo presentando Arcto, entonces puede comprender de inmediato que este tipo de gráfico se puede dibujar usando Arcto.

Cuando hablé sobre Arcto, mencioné que Arcto tiene la característica de que su segunda extensión tangente no afectará las líneas que dibuja (en la última parte anterior), lo que también nos brinda conveniencia para dibujar rectangles redondeados sin preocuparnos por la deformación.

Aquí está el método de dibujar rectángulos redondeados que encontré en un sitio web extranjero, que debería ser el más eficiente.

// rectángulo redondo

CanvasrenderingContext2d.prototype.roundrect = function (x, y, w, h, r) {

if (w & lt; 2 * r) r = w / 2;

if (h & lt; 2 * r) r = h / 2;

this.beginpath ();

this.moveto (x+r, y);

this.arcto (x+w, y, x+w, y+h, r);

this.Arcto (x+w, y+h, x, y+h, r);

this.Arcto (x, y+h, x, y, r);

this.Arcto (x, y, x+w, y, r);

// this.arcto (x+r, y);

this.ClosePath ();

devolver esto;

}

Los parámetros de esta función son X coordenadas, y coordenadas y, ancho, altura y radio de esquina redondeados. Preste especial atención al último parámetro: radio de esquina redondeada.

Este método usa Arcto 4 veces para dibujar un rectángulo redondeado, y los arcos de cada esquina son los mismos. El punto de coordenada de este rectángulo redondeado también es la misma esquina superior izquierda que el rectángulo, pero su punto de partida no está aquí, sino::

Puede eliminar una de las líneas y ver cómo es este método.

Por supuesto, me gustaría recordarte que no importa qué forma dibujes, debes recordar cerrar el camino - Cosearepath para evitar dejar peligros ocultos.

Este método tiene una devolución de esto al final, que le permite usar la sintaxis de la cadena, como:

CTX.Roundrect (200,300,200,120,20) .Stroke (); Puede eliminarlo si no lo necesita.

Si no desea expandir el prototipo de ContextrenderingContext2D, también puede usar este método para hacer otra función.

Cuando descubrí esta función, ni siquiera sabía qué era Arcto, así que no recordaba en qué sitio web lo encontré. De todos modos, no era original por mí. Gracias al autor.

En el artículo anterior, siempre he enfatizado que cada esquina del rectángulo redondeado dibujado en este método es consistente porque el radio fronterizo en CSS3 puede dibujar fácilmente rectángulos redondeados con arcos inconsistentes de cada esquina o incluso cada esquina. Encontraré una manera de dibujar rectángulos redondeados irregulares en el lienzo, pero personalmente creo que es bastante difícil.