Método Canvas arcTo()
Definição e uso
arcTo() Método para criar um arco/círculo entre duas tangentes na tela.
Dica:Use stroke() Método para desenhar um arco exato na tela.
Exemplo
Crie um arco entre duas tangentes na tela:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20); // Criar o ponto de início
ctx.lineTo(100,20); // Criar uma linha horizontal
ctx.arcTo(150,20,150,70,50); // Criar um arco
ctx.lineTo(150,120); // Criar uma linha vertical
ctx.stroke(); // Realizar o desenho
Sintaxe
context.fillRect(x1,y1,x2,y2,r);
Valor do parâmetro
| Parâmetro | Descrição |
|---|---|
| x1 | Coordenada x do ponto inicial do arco |
| y1 | Coordenada y do ponto inicial do arco |
| x2 | Coordenada x do ponto final da arco |
| y2 | Coordenada y do ponto final do arco |
| r | Raio do arco |
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou completamente essa propriedade pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
