No artigo anterior, falei sobre os métodos de desenhar retângulos e círculos. Todos eles têm funções de desenho de lona nativas que podem ser concluídas. O retângulo arredondado mencionado neste artigo só pode ser simulado através de outros métodos.
Para um retângulo arredondado normal, vamos primeiro assumir que os cantos arredondados de seus quatro cantos são os mesmos - porque isso é mais fácil de desenhar. Usamos a capacidade de dividir a superfície em linhas e é fácil descobrir que o retângulo arredondado é na verdade composto por 4 curvas em forma de gancho.
Falando em ganchos, se você leu meu artigo apresentando o Arcto, poderá entender imediatamente que esse tipo de gráfico pode ser desenhado usando o ARCTO.
Quando falei sobre o Arcto, mencionei que o Arcto tem uma característica de que sua segunda extensão tangente não afetará as linhas que ele desenha (na última parte acima), o que também fornece conveniência para traçar retângulos arredondados sem nos preocuparmos com a deformação.
A seguir, o método de desenhar retângulos arredondados que encontrei em um site estrangeiro, que deve ser o mais eficiente.
// Retângulo redondo
CanvasRanderingContext2d.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 isso;
}
Os parâmetros desta função são x coordenadas, coordenadas y, largura, altura e raio de canto arredondado. Preste atenção especial ao último parâmetro - raio de canto arredondado.
Este método usa o ARCTO 4 vezes para desenhar um retângulo arredondado, e os arcos de cada canto são os mesmos. O ponto de coordenada desse retângulo arredondado também é o mesmo canto superior esquerdo que o retângulo, mas seu ponto de partida não está aqui, mas:
Você pode remover uma das linhas e ver como esse método é.
Claro, eu gostaria de lembrá -lo de que, não importa a forma que você desenhe, você deve se lembrar de fechar o caminho - traje para evitar deixar perigos ocultos.
Este método tem um retorno no final, o que permite usar a sintaxe da cadeia, como:
ctx.RoundRect (200.300.200.120,20) .Stroke (); Você pode removê -lo se não precisar.
Se você não deseja expandir o protótipo ContextrenderingContext2D, também pode usar esse método para fazer outra função.
Quando descobri essa função, eu nem sabia o que era Arcto, então não me lembrava em qual site a encontrei. Enfim, não era original por mim. Obrigado ao autor.
No artigo anterior, sempre enfatizei que cada canto do retângulo arredondado desenhado nesse método é consistente porque o radiato de borda no CSS3 pode facilmente desenhar retângulos arredondados com arcos inconsistentes de cada canto ou mesmo em cada canto. Vou encontrar uma maneira de desenhar retângulos arredondados irregulares na tela, mas pessoalmente acho que é bastante difícil.