Índice
Basicamente todas as figuras são feitas de linhas e curvas, em muitos casos podemos simular curvas usando linhas muito curtas e em grande número, porém isso é muito complexo e envolve um trabalho excepcional, HTML5 e sua praticidade nos oferece o Método de arco Com o qual podemos desenvolver linhas curvas e de alguma forma ser capazes de complementar nossos desenhos.Método de arco
Como mencionamos no início, este método nos permite gerar linhas curvas dentro do elemento tela de pintura sem maior complexidade, sem a necessidade de introduzir fórmulas matemáticas complexas como pode ter que ser feito em algumas linguagens de programação.
Antes de ver como funciona este método, devemos conhecer suas características e propriedades, veremos a seguir na seguinte lista:
- arco (x, y, rad, ângulo inicial, ângulo final, direção): Este método desenha uma curva nas coordenadas (x, y) com um raio rad, o ângulo inicial é ângulo inicial e o fim do ângulo é angleFinal. Temos um parâmetro opcional que é Morada e especifica a direção que a curva desenhada pelo método tomará.
- arcTo (x1, y1, x2, y2, rad): Este método nos permite desenhar uma curva para as coordenadas (x2, y2) que passam as coordenadas (x1, y1) e tem um raio rad.
Como podemos ver, temos dois métodos básicos que nos permitem todo o necessário para sermos capazes de desenhar as linhas curvas em nosso elemento de tela, agora vamos ver um pequeno código para que possamos demonstrar como colocar em prática o que acabamos de ver:
Exemplo Seu navegador não suporta o tela de pintura elemento Fizemos a linha curva no exemplo usando o método arcTo () que havíamos descrito anteriormente, para desenhar essa curva dependemos de duas linhas, a primeira é desenhada do final do último sub-caminho até o ponto descrito pelos dois primeiros argumentos do método e a segunda linha é desenhada a partir do ponto descrito por os dois primeiros argumentos ao ponto descrito pelo terceiro e quarto argumentos.
Finalmente a curva é desenhada como a linha mais curta entre o último subcaminho e o segundo ponto que descreve uma curva de um círculo com o raio especificado pelo último argumento, para que possamos ver o que queremos dizer, o código incorpora algumas linhas de referência em vermelho. Vamos ver abaixo uma imagem de como isso se parece em nosso navegador:
