Agora vamos como criar caminhos com
arcos. Os arcos são segmentos de circunferências, ou uma circunferência
inteira, no caso de um arco completo.
O método que utilizamos para desenhar e fazer um arco é arc().
Estes são os parâmetros que devemos enviar ao método arc():
arc(x, y, raio, angulo_inicio, angulo_final, sentido_contrario_do_relogio)
Os parâmetros x, y correspondem às coordenadas do centro do arco.
arc(x, y, raio, angulo_inicio, angulo_final, sentido_contrario_do_relogio)
Os parâmetros x, y correspondem às coordenadas do centro do arco.
O parâmetro raio é o número de píxels que tem o arco como raio.
Por sua parte ângulo_início e ângulo_final são os ângulos onde começa e acaba o raio. Estão tomados como se o eixo da horizontal tivesse o ângulo zero.
Sentido_contrário_do_relógio é um parâmetro booleano, onde true significa que o traço vai desde um ângulo de início ao do fim no sentido contrário dos ponteiros do relógio. False indica que esse caminho é em direção contrária.
Código para realizar somente o contorno:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
O navegador não suporta canvas
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
O navegador não suporta canvas
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Veja Mais:
- Criar um retangulo sobre outro transparente com canvas no HTML5- Coordenadas do Canvas no HTML5
- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5
0 comentários:
Postar um comentário