Ofereço ajuda em Java, C/C++, Python, C#, LISP, AutoLisp, AutoCAD
+55 (062) 98553-6711
Ofereço ajuda em PHP, Python, C#, JavaScript, Laravel, Google Ads e SEO
+55 (062) 98243-1195

Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Canvas

Como usar o método arc() do objeto Canvas do HTML5 para desenhar arcos, curvas e círculos

Quantidade de visualizações: 4221 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):

<html>
<head>
  <meta charset="utf-8">
  <title>Estudos HTML5</title>
</head>
<body>

<Canvas id="canvas1" width="500" height="350"></Canvas>
 
<script type="text/javascript">
  // obtemos uma referência ao elemento Canvas  
  var canvas = document.getElementById("canvas1");
  // obtemos o contexto de desenho
  var contexto = canvas.getContext("2d");
     
  // vamos desenhar um arco sem preenchimento com raio de 80
  contexto.beginPath(); // início um novo caminho
  // o arco começa no x = 100, y = 100, começa no ângulo 90 (em graus)
  // e vai até o ânculo 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:

<html>
<head>
  <meta charset="utf-8">
  <title>Estudos HTML5</title>
</head>
<body>

<Canvas id="canvas1" width="500" height="350"></Canvas>
 
<script type="text/javascript">
  // obtemos uma referência ao elemento Canvas  
  var canvas = document.getElementById("canvas1");
  // obtemos o contexto de desenho
  var contexto = canvas.getContext("2d");
     
  // vamos desenhar um arco sem preenchimento com raio de 80
  contexto.beginPath(); // início um novo caminho
   
  // primeiro movemos a caneta de desenho para o centro do círculo
  contexto.moveTo(100, 100);
 
  // o arco começa no x = 100, y = 100, começa no ângulo 90 (em graus)
  // e vai até o ânculo 180 (graus)
  // as medidas na função arc() são em radianos, não em graus


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):

<!doctype html>
<html>
<head>
  <title>O objeto Canvas do HTML5</title>
</head>
 
<body>
 
<Canvas id="canvas1" width="500" height="350"></Canvas>
 
<script type="text/javascript">
  // obtemos uma referência ao elemento Canvas  
  var canvas = document.getElementById("canvas1");
  // obtemos o contexto de desenho
  var contexto = canvas.getContext("2d");
     
  // vamos desenhar um arco sem preenchimento com raio de 80
  contexto.beginPath(); // início um novo caminho
   
  // primeiro movemos a caneta de desenho para o centro do círculo
  contexto.moveTo(100, 100);
 
  // o arco começa no x = 100, y = 100, começa no ângulo 90 (em graus)
  // e vai até o ânculo 180 (graus)
  // as medidas na função arc() são em radianos, não em graus
  contexto.arc(100, 100, 80, Math.PI, 1.5 * Math.PI, false);


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

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 27 usuários muito felizes estudando em nosso site.