English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manual de referência HTML

大全 de etiquetas HTML

Método arc() do HTML canvas

arc() é um método do Canvas 2O método arc() é uma maneira de desenhar arcos no Canvas. O caminho do arco tem o centro no ponto (x, y), com um raio de r, e começa a desenhar a partir do startAngle (por padrão, no sentido horário) até o endAngle.

HTML canvas reference manual

Exemplo online

Desenhar um círculo:

Seu navegador não suporta HTML5 etiqueta canvas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso do método arc() no HTML canvas</title>-Tutorial básico(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5 etiqueta canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script> 
</body>
</html>
Teste e veja se funciona ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam arc() Método.

Atenção:Internet Explorer 8 Versões anteriores ao não suportam o elemento <canvas>.

Definição e uso

O método arc() cria um arco/curve (used to create a circle or part of a circle).

Hint:If you create a circle using arc(), please perform the following operations: set the start angle to 0, and set the end angle to2 * Math.PI.

Hint:Please use stroke() orfill() Method to draw an actual arc on the canvas.


Center:
arc(100,75,50,0*Math.PI,1.5*Math.PI)
Start angle:
arc(100,75,50,0,1.5*Math.PI)
End angle:
arc(100,75,50,0*Math.PI,1.5*Math.PI)
JavaScript syntax:context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Parameter value

ParameterDescription
xX coordinate of the center of the circle.
yY coordinate of the center of the circle.
rRadius of the circle.
sAngleStart angle, in radians (the circular three o'clock position is 0 degrees).
eAngleEnd angle, in radians.
counterclockwiseOptional. Specifies whether to draw in clockwise or counterclockwise. False = clockwise, true = counterclockwise.
HTML canvas reference manual