Método bezierCurveTo() del canvas HTML

Manual de referencia de HTML5 Canvas

Definición y uso

bezierCurveTo() método para agregar un punto al camino actual utilizando los puntos de control especificados para la curva bézier de tercer grado.

Consejo:Para dibujar una curva bézier de tercer grado se necesitan tres puntos. Los dos primeros puntos son puntos de control utilizados en el cálculo de la curva bézier, y el tercer punto es el punto final de la curva. El punto de inicio de la curva es el último punto del camino actual. Si no existe un camino, utilice beginPath() y moveTo() método para definir el punto de inicio.

Curva de Bézier de tercer orden
  • 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:Consulte Método quadraticCurveTo()。Tiene un punto de control, en lugar de dos.

Ejemplo

Dibujar una curva bézier de tercer grado:

Su navegador no admite la etiqueta canvas HTML5.

JavaScript:

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();

Prueba personalmente}}

Sintaxis

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 Bezier.
cp1y Coordenada y del primer punto de control de Bezier.
cp2x Coordenada x del segundo punto de control de Bezier.
cp2y Coordenada y del segundo punto de control de Bezier.
x Coordenada x del punto final.
y Coordenada y del punto final.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente 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