Manuel de référence HTML

Recueil complet des balises HTML

Méthode bezierCurveTo() de HTML canvas

bezierCurveTo() est une méthode de Canvas 2La méthode bezierCurveTo() de Canvas API permet de dessiner une trajectoire de courbe de Bézier cubique. Cette méthode nécessite trois points. Les deux premiers points sont des points de contrôle, et le troisième point est le point final. Le point de départ est le dernier point de la trajectoire actuelle, et il peut être modifié avant de dessiner la courbe de Bézier en appelant moveTo().

Manuel de référence HTML canvas

Exemple en ligne

Tracez une courbe de Bézier cubique :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode bezierCurveTo() dans HTML canvas-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　l'attribut 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>

Vérifiez ici ‹/›

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

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

Attention :Internet Explorer 8 Les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode bezierCurveTo() ajoute un point à la trajectoire actuelle en utilisant des points de contrôle représentant une courbe de Bézier cubique.

Une courbe de Bézier cubique nécessite trois points. Les deux premiers points sont utilisés comme points de contrôle dans le calcul de la courbe de Bézier, et le troisième point est le point de fin de la courbe. Le point de départ de la courbe est le dernier point du chemin actuel. Si le chemin n'existe pas, veuillez utiliser beginPath() et moveTo() Méthode 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 de fin :

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

Avis :Voir également quadraticCurveTo() Méthode. Elle a un point de contrôle, pas deux.

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

Valeur du paramètre

Paramètres	Description
cp1x	Coordonnée x du premier point de contrôle de Bezier.
cp1y	Coordonnée y du premier point de contrôle de Bezier.
cp2x	Coordonnée x du second point de contrôle de Bezier.
cp2y	Coordonnée y du second point de contrôle de Bezier.
x	Coordonnée x de la fin du point.
y	Coordonnée y de la fin du point.

Manuel de référence HTML canvas

HTML: <template> balise