Resumo : neste tutorial, você aprenderá como usar o arc()método JavaScript para desenhar um arco circular.
Introdução ao método JavaScript arc()
Este arc()é um método da API Canvas 2D. O arc()método permite desenhar um arco circular.
O seguinte mostra a sintaxe do arc()método:
ctx.arc(x, y, radius, startAngle, endAngle [, antiClockwise])Linguagem de código: CSS ( css )O arc()método desenha um arco circular centrado em (x,y)com raio de radius.
O arco começará startAnglee terminará em endAngle. Ambos startAnglee endAngleestão em radianos.
Desde então π radians = 180 degrees, 1 radiano equivale a cerca de π/ 180graus. E um círculo completo equivale a 360graus, que é 2 * π radianos. Em JavaScript, π =Math.PI
Por padrão, o caminho segue no sentido horário. Se você definir antiClockwisecomo false, o caminho percorrerá a direção oposta do relógio.
Antes de chamar o arc()método, você precisa chamar o beginPath()para iniciar um novo caminho.
Depois de chamar o arc()método, você pode traçar o arco chamando strokeStyleo stroke()método. Além disso, você pode preencher o arco fillStylechamando o fill()método.
Para definir a largura do arco, você usa a lineWidthpropriedade. Por exemplo:
ctx.lineWidth = 5;Exemplos de arco JavaScript
Vejamos alguns exemplos de uso do arc()método JavaScript para desenhar um arco.
Desenhar um círculo
O seguinte index.htmlcontém um elemento canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript arc Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>JavaScript arc Demo</h1>
<canvas id="canvas" height="400" width="500">
</canvas>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )E a seguir, use o método arc() para desenhar um círculo no centro da tela:
const canvas = document.querySelector('#canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.fillStyle = 'rgba(255,0,0,0.1)';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
}Linguagem de código: JavaScript ( javascript )Como funciona:
- Primeiro, selecione a tela usando o método querySelector().
- Em seguida, obtenha o contexto do desenho 2D se a API canvas for suportada.
- Em seguida, defina o traço, o preenchimento e a largura da linha usando as propriedades
strokeStyle,fillStyleelineWidthdo contexto de desenho 2D. - Depois disso, use o método
beginPath()earc()para desenhar um círculo no centro da tela, com raio de 100 pixels. Um círculo é um arco que tem o ângulo inicial de 0 e o ângulo final de2 * Math.PI. - Por fim, chame os métodos
stroke()efill()para aplicar o traço e o preenchimento.
A imagem a seguir mostra a saída:
E aqui está o link para a página ao vivo .
O código a seguir desenha 6 arcos com o mesmo raio. Todos os arcos têm o ângulo inicial em 0:
const canvas = document.querySelector('#canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
const x = 40,
y = canvas.height / 2,
space = 10,
radius = 30,
arcCount = 6;
for (let i = 0; i < arcCount; i++) {
ctx.beginPath();
ctx.arc(x + i * (radius * 2 + space), y, radius, 0, (i + 1) * (2 * Math.PI) / arcCount, false);
ctx.stroke();
}
}Linguagem de código: JavaScript ( javascript )Saída:
Resumo
- Use o método JavaScript
arc()para desenhar um arco. - Use o
beginPath()método para iniciar o novo arco. E use o métodostroke()e/oufill()para traçar e preencher o arco.
