Latest web development tutorials

méthode toile HTML bezierCurveTo ()

HTML Manuel toile de référence HTML Manuel toile de référence

Exemples

Dessine une courbe de Bézier cubique:

YourbrowserdoesnotsupporttheHTML5canvastag.

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

Essayez »

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

méthode Internet Explorer 9, le support Firefox, Opera, Chrome et Safari bezierCurveTo ().

Note: 8 et versions antérieures d'Internet Explorer ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

méthode bezierCurveTo () en utilisant les points de contrôle spécifiés représentent des courbes de Bézier cubiques, ajoute un point au chemin courant.

courbe de Bézier cubique nécessite trois points. Les deux premiers points sont utilisés pour calculer les points de contrôle de Bézier cubes, le troisième point est le point de la courbe de fin. point de la courbe de départ est le chemin de courant dans le dernier point. Si le chemin n'existe pas, puis utilisez beginPath () et moveTo () méthode pour définir le point de départ.

courbe de Bézier cubique

Point de départ:
moveTo (20,20)
Point de contrôle 1:
bezierCurveTo (20.100, 200,100,200,20)
Point de contrôle 2:
bezierCurveTo (20,100, 200,100, 200,20)
Point final:
bezierCurveTo (20100200100, 200,20)

Astuce: Vérifiez quadraticCurveTo () méthode.Il a un point au lieu de deux de contrôle.


Syntaxe JavaScript: contexte .bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y);

Paramètre Valeur

参数 描述
cp1x 第一个贝塞尔控制点的 x 坐标。
cp1y 第一个贝塞尔控制点的 y 坐标。
cp2x 第二个贝塞尔控制点的 x 坐标。
cp2y 第二个贝塞尔控制点的 y 坐标。
x 结束点的 x 坐标。
y 结束点的 y 坐标。

HTML Manuel toile de référence HTML Manuel toile de référence