Manual de referencia HTML

大全 de etiquetas HTML

Método arcTo() de HTML canvas

arcTo() es un método de Canvas 2D API dibuja la trayectoria del arco circular utilizando el punto de trazado actual (el punto final del último moveTo o lineTo, etc.). Según el punto de trazado actual y el punto de control dado1Conectar las líneas rectas, y el punto de control1Conectado al punto de control2Conectar las líneas rectas, que actúan como tangentes del círculo especificado por el radio, dibujar la trayectoria del arco entre las dos tangentes.

Manual de referencia de canvas HTML

Ejemplo en línea

Crear un arco en el lienzo entre dos tangentes:

JavaScript：

Ejemplo

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();　
ctx.moveTo(20,20);　　　　　　　　　　　//　Crear el punto de partida
ctx.lineTo(100,20);　　　　　　　　　　//　Crear una línea horizontal　
ctx.arcTo(150,20,150,70,50);　//　Crear un arco
ctx.lineTo(150,120);　　　　　　　　　//　Crear una línea vertical
ctx.stroke();　　　　　　　　　　　　　　　　//　Dibujar
</script>
</body>
</html>

Pruebe aquí ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Definición y uso

El método arcTo() crea un arco entre dos líneas de corte en el lienzo/Curva.

Consejo:Utilice stroke() Método para dibujar un arco exacto en el lienzo.

Sintaxis de JavaScript:	context.arcTo(x1,y1,x2,y2,r);

Valor del parámetro

Parámetros	Descripción
x1	la coordenada x del punto de intersección de las dos líneas de corte.
y1	la coordenada y del punto de intersección de las dos líneas de corte.
x2	la coordenada x de un punto en la segunda línea de corte.
y2	la coordenada y de un punto en la segunda línea de corte.
r	el radio del arco.

donde las coordenadas cartesianas de cualquier punto en la primera línea son la posición del punto anterior, en este ejemplo es 100,20. Por (x1,y1),(x2,y2,(,100,20) Tres puntos determinan la posición de dos líneas rectas y luego se determina la posición del arco con el radio.

Manual de referencia de canvas HTML

HTML: <template> etiqueta