Manual de Referencia de HTML

大全 de etiquetas HTML

Método bezierCurveTo() en HTML canvas

bezierCurveTo() es un método de Canvas 2El método bezierCurveTo() es una forma de dibujar una ruta de curva de Bézier de tercer grado en Canvas. Este método requiere tres puntos. Los primeros dos puntos son puntos de control, y el tercero es el punto final. El punto de partida es el último punto de la ruta actual, y se puede modificar antes de dibujar la curva de Bézier mediante la llamada a moveTo().

Manual de referencia de canvas HTML

Ejemplo en línea

Dibujar una curva de Bézier de tercer grado:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso del método bezierCurveTo() en HTML canvas-Tutoriales básicos(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

Prueba y mira ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9y Firefox, Opera, Chrome y Safari admiten bezierCurveTo() método.

Nota:Internet Explorer 8 Las versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método bezierCurveTo() agrega un punto a la ruta actual utilizando los puntos de control que representan una curva de Bézier de tercer grado.

Una curva de Bézier de tercer grado necesita tres puntos. Los dos primeros puntos son puntos de control utilizados en el cálculo de Bézier de tercer grado, y el tercer punto es el punto final de la curva. El punto de inicio de la curva es el último punto de la trayectoria actual. Si no existe una trayectoria, utilice beginPath() y moveTo() Método para definir el punto de inicio.

Punto de inicio:

moveTo(20,20)

Punto de control 1:

bezierCurveTo(20,100,200,100,200,20)

Punto de control 2:

bezierCurveTo(20,100,200,100,200,20)

Punto final:

bezierCurveTo(20,100,200,100,200,20)

Consejo:Ver quadraticCurveTo() Método. Tiene un punto de control, en lugar de dos.

Sintaxis de JavaScript:	context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

Valor del parámetro

Parámetros	Descripción
cp1x	Coordenada x del primer punto de control de Bézier.
cp1y	Coordenada y del primer punto de control de Bézier.
cp2x	Coordenada x del segundo punto de control de Bézier.
cp2y	Coordenada y del segundo punto de control de Bézier.
x	Coordenada x del punto final.
y	Coordenada y del punto final.

Manual de referencia de canvas HTML

HTML: <template> etiqueta