Méthode bezierCurveTo()du canvas HTML

HTML canvas 参考手册Référence HTML canvas

Exemple

Tracez une courbe de Bézier cubique :

Votre navigateur ne prend pas en charge la balise 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();

Essayez-le vous-même »

Prise en charge des navigateurs

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la méthode bezierCurveTo().

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

Définition et utilisation

La méthode bezierCurveTo() ajoute un point au chemin actuel en utilisant les points de contrôle spécifiés qui représentent une courbe de Bézier cubique.

Une courbe de Bézier cubique nécessite trois points. Les deux premiers points sont des points de contrôle utilisés dans le calcul de la courbe de Bézier cubique, et le troisième point est le point final de la courbe. Le point de départ de la courbe est le dernier point du chemin actuel. Si le chemin n'existe pas, utilisez lesbeginPath()etmoveTo()méthodes pour définir le point de départ.

三次贝塞尔曲线

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(20,100,200,100,200,20)

Astuce :Veuillez consulter laquadraticCurveTo()méthode. Elle possède un point de contrôle au lieu de deux.


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

Valeurs des paramètres

Paramètre Description
cp1x La coordonnée x du premier point de contrôle de Bézier.
cp1y La coordonnée y du premier point de contrôle de Bézier.
cp2x La coordonnée x du deuxième point de contrôle de Bézier.
cp2y La coordonnée y du deuxième point de contrôle de Bézier.
x La coordonnée x du point final.
y La coordonnée y du point d'extrémité.

HTML canvas 参考手册Référence HTML canvas Autres extensions