 |
|
||||
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Canvas |
|||
Como usar o método arc() do objeto Canvas do HTML5 para desenhar arcos, curvas e círculosQuantidade de visualizações: 4468 vezes |
|||
O método arc() do objeto Canvas do HTML5 nos permite criar figuras tais como arcos, curvas e círculos. Para isso é importante entender os seus parâmetros:arc(x, y, radius, ang1, ang2, direction); Os parâmetros x e y indicam as coordenadas do centro do círculo. O parâmetro radius indica o raio do círculo. Os parâmetros ang1 e ang2 indicam o ângulo inicial e o ângulo final. O parâmetro direction indica a direção do desenho. Se o valor true for informado, a direção será anti-horário. Se for false, o desenho será no sentido horário. É importante observar que os ângulos são medidos em radianos, não em graus. Assim, o ângulo 0 representa a posição 3 horas no relógio. A posição de 9 horas é (1 * PI), 12 horas é (1.5 * PI) e 6 horas é (0.5 * PI). Portanto, se você quiser desenhar um círculo completo, deverá sair do ângulo 0 e ir até (2 * PI). Veja um trecho de código que desenha um arco equivalente a um quarto de uma pizza, ou seja, 25%, saindo do ângulo 90º (em graus) e indo até 180º (graus):
Execute este código e veja que o arco realmente foi desenhado. Seu resultado deverá ser parecido com:  No entanto, para parecer um pedação de pizza, ou seja, o ponto de partida para um gráfico de pizza, é preciso que tenhamos duas linhas ligado esse arco ao centro do círculo. Veja a modificação que fiz:
Execute novamente e veja que agora o efeito ficou bem melhor. Seu resultado deverá ser parecido com:  Para finalizar, vamos colorir o pedação de pizza. Veja a nova versão (com o código completo):
Agora o resultado será:  |
|||
 Link para compartilhar na Internet ou com seus amigos: |
|||
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
Python - Python para iniciantes - Como inserir uma determinada quantidade de espaços à direita de uma string |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
