1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: CanvasRenderingContext2D.bezierCurveTo()
slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
tags:
- 2D
- API
- Bézier
- Canevas
- Canvas
- CanvasRenderingContext2D
- Courbe
- Courbe cubique
- Courbe cubique de Bézier
- Courbe de Bézier
- Méthode
- contexte
translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo
---
<div>{{APIRef}}</div>
<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer une courbe de Bézier.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">void <em>contexte2D</em>.bezierCurveTo(<em>pointContrôle1X</em>, <em>pointContrôle1Y</em>, <em>pointContrôle2X</em>, <em>pointContrôle2Y</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>);
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>pointContrôle1X</code></dt>
<dd>La coordonnée en x du premier point de contrôle.</dd>
<dt><code>pointContrôle1Y</code></dt>
<dd>La coordonnée en y du premier point de contrôle.</dd>
<dt><code>pointContrôle2X</code></dt>
<dd>La coordonnée en x du second point de contrôle.</dd>
<dt><code>pointContrôle2Y</code></dt>
<dd>La coordonnée en y du second point de contrôle.</dd>
<dt><code>pointArrivéeX</code></dt>
<dd>La coordonnée en x du point d'arrivée.</dd>
<dt><code>pointArrivéeY</code></dt>
<dd>La coordonnée en y du point d'arrivée.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Comment_bezierCurveTo_fonctionne">Comment bezierCurveTo fonctionne</h3>
<p>Cet exemple montre comment une courbe cubique de Bézier est dessinée.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[14]">// Définit le canevas et son contexte 2D
const canevas = document.getElementById("canvas");
const contexte2D = canevas.getContext("2d");
// Define the points as {x, y}
let pDépart = { x: 50, y: 20 };
let pContrôle1 = { x: 230, y: 30 };
let pContrôle2 = { x: 150, y: 80 };
let pArrivée = { x: 250, y: 100 };
// Courbe cubique de Bézier
contexte2D.beginPath();
contexte2D.moveTo(start.x, start.y);
contexte2D.bezierCurveTo(pContrôle1.x, pContrôle1.y, pContrôle2.x, pContrôle2.y, pArrivée.x, pArrivée.y);
contexte2D.stroke();
// Points de départ et d'arrivée
contexte2D.fillStyle = 'blue';
contexte2D.beginPath();
contexte2D.arc(pDépart.x, pDépart.y, 5, 0, 2 * Math.PI); // Point de départ
contexte2D.arc(pArrivée.x, pArrivée.y, 5, 0, 2 * Math.PI); // Point d'arrivée
contexte2D.fill();
// Points de contrôle
contexte2D.fillStyle = 'red';
contexte2D.beginPath();
contexte2D.arc(pContrôle1.x, pContrôle1.y, 5, 0, 2 * Math.PI); // Point de contrôle 1
contexte2D.arc(pContrôle2.x, pContrôle2.y, 5, 0, 2 * Math.PI); // Point de contrôle 2
contexte2D.fill();</pre>
<h4 id="Résultat">Résultat</h4>
<p>Dans cet exemple, les <span style="color: red;">points de contrôle sont rouges</span> et les <span style="color: blue;">points de départ et d'arrivée sont bleus</span>.</p>
<p>{{ EmbedLiveSample('How_bezierCurveTo_works', 315, 165) }}</p>
<h3 id="Une_simple_courbe_cubique_de_Bézier">Une simple courbe cubique de Bézier</h3>
<p>Cet exemple dessine une simple courbe cubique de Bézier en utilisant <code>bezierCurveTo()</code>.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript_2">JavaScript</h4>
<p>La courbe débute au point spécifiée par <code>moveTo()</code>: (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p>
<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas");
const contexte2D = canevas.getContext("2d");
contexte2D.beginPath();
contexte2D.moveTo(30, 30);
contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
contexte2D.stroke();</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{ EmbedLiveSample('A_simple_Bézier_curve', 700, 180) }}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.CanvasRenderingContext2D.bezierCurveTo")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li>
<li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">L'article Wikipédia sur les courbes de Bézier</a></li>
</ul>
|
