Método HTML canvas arcTo()

Manual de referencia de HTML5 Canvas

Definición y uso

arcTo() El método crea un arco/curva entre dos tangentes en el lienzo.

Consejo:Utilice stroke() El método dibuja un arco exacto en el lienzo.

Ejemplo

Crear un arco entre dos tangentes en el lienzo:

Su navegador no admite la etiqueta HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20);           // Crear punto de inicio
ctx.lineTo(100,20);          // Crear línea horizontal
ctx.arcTo(150,20,150,70,50); // Crear un arco
ctx.lineTo(150,120);         // Crear una línea vertical
ctx.stroke();                // Realizar el dibujo

Pruebe usted mismo

Sintaxis

context.fillRect(x1,y1,x2,y2,r);

Valor de los parámetros

Parámetros Descripción
x1 Coordenada x del punto de partida del arco.
y1 Coordenada y del punto de partida del arco.
x2 Coordenada x del punto final del arco.
y2 Coordenada y del punto final del arco.
r Radio del arco.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite por primera vez la propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Manual de referencia de HTML5 Canvas