From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- .../api/canvasrenderingcontext2d/arc/index.html | 167 --------- .../web/api/canvasrenderingcontext2d/arc/index.md | 167 +++++++++ .../canvasrenderingcontext2d/beginpath/index.html | 128 ------- .../canvasrenderingcontext2d/beginpath/index.md | 128 +++++++ .../beziercurveto/index.html | 125 ------- .../beziercurveto/index.md | 125 +++++++ .../api/canvasrenderingcontext2d/canvas/index.html | 59 ---- .../api/canvasrenderingcontext2d/canvas/index.md | 59 ++++ .../canvasrenderingcontext2d/clearrect/index.html | 141 -------- .../canvasrenderingcontext2d/clearrect/index.md | 141 ++++++++ .../canvasrenderingcontext2d/closepath/index.html | 112 ------ .../canvasrenderingcontext2d/closepath/index.md | 112 ++++++ .../createlineargradient/index.html | 147 -------- .../createlineargradient/index.md | 147 ++++++++ .../canvasrenderingcontext2d/direction/index.html | 125 ------- .../canvasrenderingcontext2d/direction/index.md | 125 +++++++ .../canvasrenderingcontext2d/drawimage/index.html | 167 --------- .../canvasrenderingcontext2d/drawimage/index.md | 167 +++++++++ .../canvasrenderingcontext2d/ellipse/index.html | 130 ------- .../api/canvasrenderingcontext2d/ellipse/index.md | 130 +++++++ .../api/canvasrenderingcontext2d/fill/index.html | 197 ----------- .../web/api/canvasrenderingcontext2d/fill/index.md | 197 +++++++++++ .../canvasrenderingcontext2d/fillrect/index.html | 124 ------- .../api/canvasrenderingcontext2d/fillrect/index.md | 124 +++++++ .../canvasrenderingcontext2d/fillstyle/index.html | 158 --------- .../canvasrenderingcontext2d/fillstyle/index.md | 158 +++++++++ .../canvasrenderingcontext2d/filltext/index.html | 126 ------- .../api/canvasrenderingcontext2d/filltext/index.md | 126 +++++++ .../api/canvasrenderingcontext2d/font/index.html | 136 -------- .../web/api/canvasrenderingcontext2d/font/index.md | 136 ++++++++ .../getimagedata/index.html | 101 ------ .../canvasrenderingcontext2d/getimagedata/index.md | 101 ++++++ .../globalalpha/index.html | 173 ---------- .../canvasrenderingcontext2d/globalalpha/index.md | 173 ++++++++++ .../globalcompositeoperation/index.html | 95 ------ .../globalcompositeoperation/index.md | 95 ++++++ .../imagesmoothingenabled/index.html | 99 ------ .../imagesmoothingenabled/index.md | 99 ++++++ .../fr/web/api/canvasrenderingcontext2d/index.html | 380 --------------------- files/fr/web/api/canvasrenderingcontext2d/index.md | 380 +++++++++++++++++++++ .../canvasrenderingcontext2d/linecap/index.html | 171 ---------- .../api/canvasrenderingcontext2d/linecap/index.md | 171 ++++++++++ .../canvasrenderingcontext2d/linejoin/index.html | 133 -------- .../api/canvasrenderingcontext2d/linejoin/index.md | 133 ++++++++ .../api/canvasrenderingcontext2d/lineto/index.html | 122 ------- .../api/canvasrenderingcontext2d/lineto/index.md | 122 +++++++ .../measuretext/index.html | 73 ---- .../canvasrenderingcontext2d/measuretext/index.md | 73 ++++ .../api/canvasrenderingcontext2d/moveto/index.html | 120 ------- .../api/canvasrenderingcontext2d/moveto/index.md | 120 +++++++ .../quadraticcurveto/index.html | 137 -------- .../quadraticcurveto/index.md | 137 ++++++++ .../api/canvasrenderingcontext2d/rect/index.html | 122 ------- .../web/api/canvasrenderingcontext2d/rect/index.md | 122 +++++++ .../api/canvasrenderingcontext2d/rotate/index.html | 122 ------- .../api/canvasrenderingcontext2d/rotate/index.md | 122 +++++++ .../api/canvasrenderingcontext2d/save/index.html | 91 ----- .../web/api/canvasrenderingcontext2d/save/index.md | 91 +++++ .../api/canvasrenderingcontext2d/scale/index.html | 167 --------- .../api/canvasrenderingcontext2d/scale/index.md | 167 +++++++++ .../setlinedash/index.html | 159 --------- .../canvasrenderingcontext2d/setlinedash/index.md | 159 +++++++++ .../settransform/index.html | 129 ------- .../canvasrenderingcontext2d/settransform/index.md | 129 +++++++ .../api/canvasrenderingcontext2d/stroke/index.html | 108 ------ .../api/canvasrenderingcontext2d/stroke/index.md | 108 ++++++ .../canvasrenderingcontext2d/strokerect/index.html | 123 ------- .../canvasrenderingcontext2d/strokerect/index.md | 123 +++++++ .../strokestyle/index.html | 154 --------- .../canvasrenderingcontext2d/strokestyle/index.md | 154 +++++++++ .../canvasrenderingcontext2d/stroketext/index.html | 126 ------- .../canvasrenderingcontext2d/stroketext/index.md | 126 +++++++ .../canvasrenderingcontext2d/textalign/index.html | 128 ------- .../canvasrenderingcontext2d/textalign/index.md | 128 +++++++ .../textbaseline/index.html | 130 ------- .../canvasrenderingcontext2d/textbaseline/index.md | 130 +++++++ .../canvasrenderingcontext2d/transform/index.html | 132 ------- .../canvasrenderingcontext2d/transform/index.md | 132 +++++++ .../canvasrenderingcontext2d/translate/index.html | 122 ------- .../canvasrenderingcontext2d/translate/index.md | 122 +++++++ 80 files changed, 5459 insertions(+), 5459 deletions(-) delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/arc/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/arc/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/canvas/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/closepath/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/closepath/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/direction/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/direction/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/fill/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/fill/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/filltext/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/filltext/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/font/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/font/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/linecap/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/linecap/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/lineto/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/lineto/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/moveto/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/moveto/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/rect/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/rect/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/rotate/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/rotate/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/save/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/save/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/scale/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/scale/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/settransform/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/settransform/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/stroke/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/stroke/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/textalign/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/textalign/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/transform/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/transform/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/translate/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/translate/index.md (limited to 'files/fr/web/api/canvasrenderingcontext2d') diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html deleted file mode 100644 index d51cb083df..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: CanvasRenderingContext2D.arc() -slug: Web/API/CanvasRenderingContext2D/arc -tags: - - Canvas - - CanvasRenderingContext2D - - Method - - Reference -translation_of: Web/API/CanvasRenderingContext2D/arc ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.arc() de l'API Canvas 2D permet d'ajouter un arc de cercle  au tracé, en le centrant aux positions (x, y) et avec un rayon r qui démarre à angleDépart et qui finit à angleFin, dans la direction de sensAntiHoraire (par défaut en sens horaire).

- -

Syntaxe

- -
void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);
-
- -

Paramètres

- -
-
x
-
La position en x du centre de l'arc.
-
y
-
La position en y du centre de l'arc.
-
radius (rayon)
-
Le rayon de l'arc.
-
startAngle (angle départ)
-
La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
-
endAngle (angle fin)
-
La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
-
anticlockwise (sens anti-horaire) {{optional_inline}}
-
Un {{jsxref("Booléen")}} facultatif qui, si à true(vrai), indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.
-
- -

Exemples

- -

En utilisant la méthode arc 

- -

Voici un code simple permettant de dessiner un cercle .

- -

HTML

- -
<canvas id="canvas"></canvas>
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(75, 75, 50, 0, 2 * Math.PI);
-ctx.stroke();
- -

Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :

- -

Code jouable

- - - -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var edit = document.getElementById("edit");
-var code = textarea.value;
-
-function drawCanvas() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  eval(textarea.value);
-}
-
-reset.addEventListener("click", function() {
-  textarea.value = code;
-  drawCanvas();
-});
-
-edit.addEventListener("click", function() {
-  textarea.focus();
-})
-
-textarea.addEventListener("input", drawCanvas);
-window.addEventListener("load", drawCanvas);
-
- - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Exemple avec différentes formes

- -

Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par arc().

- - - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-// Draw shapes
-for (var i = 0; i < 4; i++) {
-  for(var j = 0; j < 3; j++) {
-    ctx.beginPath();
-    var x              = 25 + j * 50;               // x coordinate
-    var y              = 25 + i * 50;               // y coordinate
-    var radius         = 20;                    // Arc radius
-    var startAngle     = 0;                     // Starting point on circle
-    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
-    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise
-
-    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-    if (i > 1) {
-      ctx.fill();
-    } else {
-      ctx.stroke();
-    }
-  }
-}
- -

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.arc")}}

- -

Notes spécifiques à Gecko

- -

Avec Gecko 2.0 {{geckoRelease("2.0")}}:

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md new file mode 100644 index 0000000000..d51cb083df --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +tags: + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.arc() de l'API Canvas 2D permet d'ajouter un arc de cercle  au tracé, en le centrant aux positions (x, y) et avec un rayon r qui démarre à angleDépart et qui finit à angleFin, dans la direction de sensAntiHoraire (par défaut en sens horaire).

+ +

Syntaxe

+ +
void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);
+
+ +

Paramètres

+ +
+
x
+
La position en x du centre de l'arc.
+
y
+
La position en y du centre de l'arc.
+
radius (rayon)
+
Le rayon de l'arc.
+
startAngle (angle départ)
+
La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
+
endAngle (angle fin)
+
La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
+
anticlockwise (sens anti-horaire) {{optional_inline}}
+
Un {{jsxref("Booléen")}} facultatif qui, si à true(vrai), indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.
+
+ +

Exemples

+ +

En utilisant la méthode arc 

+ +

Voici un code simple permettant de dessiner un cercle .

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+ +

Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :

+ +

Code jouable

+ + + +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+ + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Exemple avec différentes formes

+ +

Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par arc().

+ + + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (var i = 0; i < 4; i++) {
+  for(var j = 0; j < 3; j++) {
+    ctx.beginPath();
+    var x              = 25 + j * 50;               // x coordinate
+    var y              = 25 + i * 50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
+    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i > 1) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}
+ +

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.arc")}}

+ +

Notes spécifiques à Gecko

+ +

Avec Gecko 2.0 {{geckoRelease("2.0")}}:

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html deleted file mode 100644 index e59e5be4a4..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: CanvasRenderingContext2D.beginPath() -slug: Web/API/CanvasRenderingContext2D/beginPath -tags: - - API - - Canvas - - CanvasRenderingContext2D -translation_of: Web/API/CanvasRenderingContext2D/beginPath ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.beginPath() de l'API Canvas 2D permet de commencer un nouveau chemin en vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.

- -

Syntaxe

- -
void ctx.beginPath();
-
- -

Exemples

- -

Utiliser la méthode beginPath

- -

Ceci est un simple snippet de code qui utilise la méthode beginPath.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-// Premier chemin
-ctx.beginPath();
-ctx.strokeStyle = 'blue';
-ctx.moveTo(20, 20);
-ctx.lineTo(200, 20);
-ctx.stroke();
-
-// Second chemin
-ctx.beginPath();
-ctx.strokeStyle = 'green';
-ctx.moveTo(20, 20);
-ctx.lineTo(120, 120);
-ctx.stroke();
-
- -

Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 460) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.beginPath")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md new file mode 100644 index 0000000000..e59e5be4a4 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.beginPath() +slug: Web/API/CanvasRenderingContext2D/beginPath +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/beginPath +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.beginPath() de l'API Canvas 2D permet de commencer un nouveau chemin en vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.

+ +

Syntaxe

+ +
void ctx.beginPath();
+
+ +

Exemples

+ +

Utiliser la méthode beginPath

+ +

Ceci est un simple snippet de code qui utilise la méthode beginPath.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Premier chemin
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Second chemin
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+
+ +

Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 460) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.beginPath")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html deleted file mode 100644 index f5e140589e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: CanvasRenderingContext2D.bezierCurveTo() -slug: Web/API/CanvasRenderingContext2D/bezierCurveTo -translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo -browser-compat: api.CanvasRenderingContext2D.bezierCurveTo ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.bezierCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier 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 moveTo() avant de créer une courbe de Bézier.

- -

Syntaxe

- -
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-
- -

Paramètres

- -
-
cp1x
-
L'abscisse du premier point de contrôle.
-
cp1y
-
L'ordonnée du premier point de contrôle.
-
cp2x
-
L'abscisse du second point de contrôle.
-
cp2y
-
L'ordonnée du second point de contrôle.
-
x
-
L'abscisse du point d'arrivée.
-
y
-
L'ordonnée du point d'arrivée.
-
- -

Exemples

- -

Fonctionnement de bezierCurveTo()

- -

Cet exemple montre comment une courbe cubique de Bézier est dessinée.

- -

HTML

- -
-<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
-// Define canvas and context
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-// Define the points as {x, y}
-let debut = { x: 50,    y: 20  };
-let cp1 =   { x: 230,   y: 30  };
-let cp2 =   { x: 150,   y: 80  };
-let fin =   { x: 250,   y: 100 };
-
-// Courbe de Bézier cubique
-ctx.beginPath();
-ctx.moveTo(debut.x, debut.y);
-ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, fin.x, fin.y);
-ctx.stroke();
-
-// Points de début et d'arrivée
-ctx.fillStyle = 'blue';
-ctx.beginPath();
-ctx.arc(debut.x, debut.y, 5, 0, 2 * Math.PI);  // Début
-ctx.arc(fin.x, fin.y, 5, 0, 2 * Math.PI);      // Fin
-ctx.fill();
-
-// Points de contrôles
-ctx.fillStyle = 'red';
-ctx.beginPath();
-ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°1
-ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°2
-ctx.fill();
-
- -

Résultat

- -

Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.

- -

{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}

- -

Une courbe cubique de Bézier simple

- -

Cet exemple dessine une courbe cubique de Bézier simple en utilisant bezierCurveTo().

- -

HTML

- -
-<canvas id="canvas"></canvas>
-
- -

JavaScript

- -

La courbe débute au point spécifié par moveTo() : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).

- -
-const canvas = document.getElementById("canvas");
-const contexte2D = canvas.getContext("2d");
-
-contexte2D.beginPath();
-contexte2D.moveTo(30, 30);
-contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
-contexte2D.stroke();
- -

Résultat

- -

{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md new file mode 100644 index 0000000000..f5e140589e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -0,0 +1,125 @@ +--- +title: CanvasRenderingContext2D.bezierCurveTo() +slug: Web/API/CanvasRenderingContext2D/bezierCurveTo +translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo +browser-compat: api.CanvasRenderingContext2D.bezierCurveTo +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.bezierCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier 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 moveTo() avant de créer une courbe de Bézier.

+ +

Syntaxe

+ +
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+
+ +

Paramètres

+ +
+
cp1x
+
L'abscisse du premier point de contrôle.
+
cp1y
+
L'ordonnée du premier point de contrôle.
+
cp2x
+
L'abscisse du second point de contrôle.
+
cp2y
+
L'ordonnée du second point de contrôle.
+
x
+
L'abscisse du point d'arrivée.
+
y
+
L'ordonnée du point d'arrivée.
+
+ +

Exemples

+ +

Fonctionnement de bezierCurveTo()

+ +

Cet exemple montre comment une courbe cubique de Bézier est dessinée.

+ +

HTML

+ +
+<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
+// Define canvas and context
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Define the points as {x, y}
+let debut = { x: 50,    y: 20  };
+let cp1 =   { x: 230,   y: 30  };
+let cp2 =   { x: 150,   y: 80  };
+let fin =   { x: 250,   y: 100 };
+
+// Courbe de Bézier cubique
+ctx.beginPath();
+ctx.moveTo(debut.x, debut.y);
+ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, fin.x, fin.y);
+ctx.stroke();
+
+// Points de début et d'arrivée
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(debut.x, debut.y, 5, 0, 2 * Math.PI);  // Début
+ctx.arc(fin.x, fin.y, 5, 0, 2 * Math.PI);      // Fin
+ctx.fill();
+
+// Points de contrôles
+ctx.fillStyle = 'red';
+ctx.beginPath();
+ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°1
+ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°2
+ctx.fill();
+
+ +

Résultat

+ +

Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.

+ +

{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}

+ +

Une courbe cubique de Bézier simple

+ +

Cet exemple dessine une courbe cubique de Bézier simple en utilisant bezierCurveTo().

+ +

HTML

+ +
+<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

La courbe débute au point spécifié par moveTo() : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).

+ +
+const canvas = document.getElementById("canvas");
+const contexte2D = canvas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(30, 30);
+contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
+contexte2D.stroke();
+ +

Résultat

+ +

{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html deleted file mode 100644 index c548b4ed9e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: CanvasRenderingContext2D.canvas -slug: Web/API/CanvasRenderingContext2D/canvas -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/canvas ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.canvas est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.

- -

Syntaxe

- -
ctx.canvas;
- -

Exemples

- -

Soit cet élément {{HTMLElement("canvas")}}:

- -
<canvas id="canvas"></canvas>
-
- -

Vous pouvez obtenir la référence à l'élément canvas grâce à CanvasRenderingContext2D en utilisant la propriété canvas :

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-ctx.canvas // HTMLCanvasElement
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.canvas")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md new file mode 100644 index 0000000000..c548b4ed9e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md @@ -0,0 +1,59 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.canvas est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.

+ +

Syntaxe

+ +
ctx.canvas;
+ +

Exemples

+ +

Soit cet élément {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas"></canvas>
+
+ +

Vous pouvez obtenir la référence à l'élément canvas grâce à CanvasRenderingContext2D en utilisant la propriété canvas :

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.canvas")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html deleted file mode 100644 index 7bf854557e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: CanvasRenderingContext2D.clearRect() -slug: Web/API/CanvasRenderingContext2D/clearRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/clearRect ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.clearRect() de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées (x, y) et par les tailles (largeur, hauteur), supprimant tout contenu précédemment dessiné.

- -

Syntaxe

- -
void ctx.clearRect(x, y, largeur, hauteur);
-
- -

Paramètres

- -
-
x
-
La coordonnée sur l'axe des x du point de départ du rectangle.
-
y
-
La coordonnée sur l'axe des y du point de départ du rectangle.
-
largeur
-
La largeur du rectangle.
-
hauteur
-
La hauteur de rectangle.
-
- -

Notes d'utilisation

- -

Un problème classique avec clearRect est qu'il peut apparaître comme ne fonctionnant pas si l'on n'utilise pas les trajets de façon appropriée. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé clearRect.

- -

Exemples

- -

Utilisation de la méthode clearRect

- -

Ceci est seulement un fragment de code simple qui utilise la méthode clearRect.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById("canvas");
-var ctx = canevas.getContext("2d");
-
-ctx.beginPath();
-ctx.moveTo(20,20);
-ctx.lineTo(200,20);
-ctx.lineTo(120,120);
-ctx.closePath(); // dessine la dernière ligne du triangle
-ctx.stroke();
-
-ctx.clearRect(10, 10, 100, 100);
-
-// effacer le canevas entièrement
-// ctx.clearRect(0, 0, canvas.width, canvas.height);
-
- -

Modifiez le code suivant et voyez vos changements en direct dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 400) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.clearRect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md new file mode 100644 index 0000000000..7bf854557e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -0,0 +1,141 @@ +--- +title: CanvasRenderingContext2D.clearRect() +slug: Web/API/CanvasRenderingContext2D/clearRect +tags: + - API + - Canvas + - CanvasRendering2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/clearRect +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.clearRect() de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées (x, y) et par les tailles (largeur, hauteur), supprimant tout contenu précédemment dessiné.

+ +

Syntaxe

+ +
void ctx.clearRect(x, y, largeur, hauteur);
+
+ +

Paramètres

+ +
+
x
+
La coordonnée sur l'axe des x du point de départ du rectangle.
+
y
+
La coordonnée sur l'axe des y du point de départ du rectangle.
+
largeur
+
La largeur du rectangle.
+
hauteur
+
La hauteur de rectangle.
+
+ +

Notes d'utilisation

+ +

Un problème classique avec clearRect est qu'il peut apparaître comme ne fonctionnant pas si l'on n'utilise pas les trajets de façon appropriée. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé clearRect.

+ +

Exemples

+ +

Utilisation de la méthode clearRect

+ +

Ceci est seulement un fragment de code simple qui utilise la méthode clearRect.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canevas = document.getElementById("canvas");
+var ctx = canevas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // dessine la dernière ligne du triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// effacer le canevas entièrement
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ +

Modifiez le code suivant et voyez vos changements en direct dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 400) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.clearRect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html deleted file mode 100644 index ee83dd8db5..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: CanvasRenderingContext2D.closePath() -slug: Web/API/CanvasRenderingContext2D/closePath -tags: - - Méthode -translation_of: Web/API/CanvasRenderingContext2D/closePath ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.closePath() de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.

- -

Syntax

- -
void ctx.closePath();
-
- -

Exemples

- -

Utiliser la méthode closePath

- -

Voici un exemple d'utilisation de la méthode closePath.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-ctx.beginPath();
-ctx.moveTo(20,20);
-ctx.lineTo(200,20);
-ctx.lineTo(120,120);
-ctx.closePath(); // ferme le triangle par une ligne droite
-ctx.stroke();
-
- -

Editez le code ci-dessous et observez les répercutions dans le canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 400) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.closePath")}}

- -

Voir également

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md new file mode 100644 index 0000000000..ee83dd8db5 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -0,0 +1,112 @@ +--- +title: CanvasRenderingContext2D.closePath() +slug: Web/API/CanvasRenderingContext2D/closePath +tags: + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/closePath +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.closePath() de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.

+ +

Syntax

+ +
void ctx.closePath();
+
+ +

Exemples

+ +

Utiliser la méthode closePath

+ +

Voici un exemple d'utilisation de la méthode closePath.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // ferme le triangle par une ligne droite
+ctx.stroke();
+
+ +

Editez le code ci-dessous et observez les répercutions dans le canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 400) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.closePath")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html deleted file mode 100644 index d8bab917a3..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: CanvasRenderingContext2D.createLinearGradient() -slug: Web/API/CanvasRenderingContext2D/createLinearGradient -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Gradients - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.createLinearGradient() de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.

- -

- -

Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.

- -

NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".

- -

Syntaxe

- -
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
-
- -

Paramètres

- -
-
x0
-
La coordonnée sur l'axe des x du point de début.
-
y0
-
La coordonnée sur l'axe des y du point de début.
-
x1
-
La coordonnée sur l'axe des x du point de fin.
-
y1
-
La coordonnée sur l'axe des y du point de fin.
-
- -

Valeur retournée

- -
-
{{domxref("CanvasGradient")}}
-
Un CanvasGradient linéaire initialisé avec la ligne spécifiée.
-
- -

Exemples

- -

Utilisation de la méthode createLinearGradient

- -

Ceci est seulement un simple fragment de code qui utilise la méthode createLinearGradient pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var gradient = ctx.createLinearGradient(0, 0, 200, 0);
-gradient.addColorStop(0, 'green');
-gradient.addColorStop(1, 'white');
-ctx.fillStyle = gradient;
-ctx.fillRect(10, 10, 200, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

- -

Notes spécifiques à Gecko

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md new file mode 100644 index 0000000000..d8bab917a3 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -0,0 +1,147 @@ +--- +title: CanvasRenderingContext2D.createLinearGradient() +slug: Web/API/CanvasRenderingContext2D/createLinearGradient +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Gradients + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.createLinearGradient() de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.

+ +

+ +

Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.

+ +

NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".

+ +

Syntaxe

+ +
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
+
+ +

Paramètres

+ +
+
x0
+
La coordonnée sur l'axe des x du point de début.
+
y0
+
La coordonnée sur l'axe des y du point de début.
+
x1
+
La coordonnée sur l'axe des x du point de fin.
+
y1
+
La coordonnée sur l'axe des y du point de fin.
+
+ +

Valeur retournée

+ +
+
{{domxref("CanvasGradient")}}
+
Un CanvasGradient linéaire initialisé avec la ligne spécifiée.
+
+ +

Exemples

+ +

Utilisation de la méthode createLinearGradient

+ +

Ceci est seulement un simple fragment de code qui utilise la méthode createLinearGradient pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var gradient = ctx.createLinearGradient(0, 0, 200, 0);
+gradient.addColorStop(0, 'green');
+gradient.addColorStop(1, 'white');
+ctx.fillStyle = gradient;
+ctx.fillRect(10, 10, 200, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

+ +

Notes spécifiques à Gecko

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html deleted file mode 100644 index e4dae769e1..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: CanvasRenderingContext2D.direction -slug: Web/API/CanvasRenderingContext2D/direction -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/direction ---- -
{{APIRef}} {{SeeCompatTable}}
- -

La propriété CanvasRenderingContext2D.direction de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.

- -

Syntaxe

- -
ctx.direction = "ltr" || "rtl" || "inherit";
-
- -

Options

- -

Valeurs possibles :

- -
-
ltr
-
La direction du texte est de gauche à droite.
-
rtl
-
La direction du texte est de droite à gauche.
-
inherit
-
La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.
-
- -

La valeur par défaut est inherit.

- -

Exemples

- -

Utilisation de la propriété direction

- -

Ceci est seulement un fragment de code simple utilisant la propriété direction pour indiquer un réglage de ligne de base différent.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.direction = 'ltr';
-ctx.strokeText('Hello world', 0, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{EmbedLiveSample('code_jouable', 700, 360)}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.direction")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md new file mode 100644 index 0000000000..e4dae769e1 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -0,0 +1,125 @@ +--- +title: CanvasRenderingContext2D.direction +slug: Web/API/CanvasRenderingContext2D/direction +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/direction +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

La propriété CanvasRenderingContext2D.direction de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.

+ +

Syntaxe

+ +
ctx.direction = "ltr" || "rtl" || "inherit";
+
+ +

Options

+ +

Valeurs possibles :

+ +
+
ltr
+
La direction du texte est de gauche à droite.
+
rtl
+
La direction du texte est de droite à gauche.
+
inherit
+
La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.
+
+ +

La valeur par défaut est inherit.

+ +

Exemples

+ +

Utilisation de la propriété direction

+ +

Ceci est seulement un fragment de code simple utilisant la propriété direction pour indiquer un réglage de ligne de base différent.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.direction = 'ltr';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{EmbedLiveSample('code_jouable', 700, 360)}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.direction")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html deleted file mode 100644 index 92bc5a9b9d..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: CanvasRenderingContext2D.drawImage() -slug: Web/API/CanvasRenderingContext2D/drawImage -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) -translation_of: Web/API/CanvasRenderingContext2D/drawImage ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.drawImage() de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.

- -

Syntaxe

- -
void ctx.drawImage(image, dx, dy);
-void ctx.drawImage(image, dx, dy, dLargeur, dHauteur);
-void ctx.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);
-
- -

drawImage

- -

Paramètres

- -
-
image
-
Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.
-
dx
-
La coordonnée x dans le canvas de destination où placer le coin supérieur gauche de l'image source.
-
dy
-
La coordonnée y dans le canvas de destination où placer le coin supérieur gauche de l'image source.
-
dLargeur
-
La largeur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.
-
dHauteur
-
La hauteur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.
-
sx
-
La coordonnée x du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
-
sy
-
La coordonnée y du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
-
sLargeur
-
La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins sx, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (sx ; sy) et jusqu'au bord en bas à droite.
-
sHauteur
-
La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins sy.
-
- -

Exceptions

- -
-
INDEX_SIZE_ERR
-
Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.
-
INVALID_STATE_ERR
-
L'image reçue n'en est pas une.
-
TYPE_MISMATCH_ERR
-
L'image reçue n'est pas supportée.
-
- -

Exemples

- -

Utiliser la méthode drawImage

- -

Ceci est un extrait de code utilisant la méthode drawImage :

- -

HTML

- -
<canvas id="canvas"></canvas>
-  <img id="source" src="rhino.jpg"
-       width="300" height="227">
-</div>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var image = document.getElementById("source");
-
-ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
-
- -

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.drawImage")}}

- -

Notes concernant la compatibilité

- - - -

Notes

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md new file mode 100644 index 0000000000..92bc5a9b9d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.drawImage() +slug: Web/API/CanvasRenderingContext2D/drawImage +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/drawImage +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.drawImage() de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.

+ +

Syntaxe

+ +
void ctx.drawImage(image, dx, dy);
+void ctx.drawImage(image, dx, dy, dLargeur, dHauteur);
+void ctx.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);
+
+ +

drawImage

+ +

Paramètres

+ +
+
image
+
Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.
+
dx
+
La coordonnée x dans le canvas de destination où placer le coin supérieur gauche de l'image source.
+
dy
+
La coordonnée y dans le canvas de destination où placer le coin supérieur gauche de l'image source.
+
dLargeur
+
La largeur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.
+
dHauteur
+
La hauteur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.
+
sx
+
La coordonnée x du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
+
sy
+
La coordonnée y du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
+
sLargeur
+
La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins sx, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (sx ; sy) et jusqu'au bord en bas à droite.
+
sHauteur
+
La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins sy.
+
+ +

Exceptions

+ +
+
INDEX_SIZE_ERR
+
Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.
+
INVALID_STATE_ERR
+
L'image reçue n'en est pas une.
+
TYPE_MISMATCH_ERR
+
L'image reçue n'est pas supportée.
+
+ +

Exemples

+ +

Utiliser la méthode drawImage

+ +

Ceci est un extrait de code utilisant la méthode drawImage :

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+  <img id="source" src="rhino.jpg"
+       width="300" height="227">
+</div>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById("source");
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+
+ +

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.drawImage")}}

+ +

Notes concernant la compatibilité

+ + + +

Notes

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html deleted file mode 100644 index 49a19c218c..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: CanvasRenderingContext2D.ellipse() -slug: Web/API/CanvasRenderingContext2D/ellipse -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Méthode -translation_of: Web/API/CanvasRenderingContext2D/ellipse ---- -
{{APIRef}} {{SeeCompatTable}}
- -

La méthode CanvasRenderingContext2D.ellipse() de l'API Canvas 2D ajoute une ellipse au trajet, centrée en (x, y), les rayons rayonX et rayonY commençant à angleDeDébut et se terminant à angleDeFin, en allant dans le sens indiqué par antiHoraire (par défaut, horaire).

- -

Syntaxe

- -
void ctx.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);
-
- -

Paramètres

- -
-
x
-
La coordonnée sur l'axe des x du centre de l'ellipse.
-
y
-
La coordonnée sur l'axe des y du centre de l'ellipse.
-
rayonX
-
Le rayon du grand axe de l'ellipse.
-
rayonY
-
Le rayon du petit axe de l'ellipse.
-
rotation
-
La rotation pour cette ellipse, exprimée en radians.
-
angleDébut
-
L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.
-
angleFin
-
L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.
-
antihoraire {{optional_inline}}
-
Un {{jsxref("Boolean")}} optionnel qui, si true, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.
-
- -

Exemples

- -

Utilisation de la méthode ellipse

- -

Ceci est seulement un fragment de code simple dessinant une ellipse.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.beginPath();
-ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
-ctx.stroke();
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.ellipse")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md new file mode 100644 index 0000000000..49a19c218c --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -0,0 +1,130 @@ +--- +title: CanvasRenderingContext2D.ellipse() +slug: Web/API/CanvasRenderingContext2D/ellipse +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/ellipse +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

La méthode CanvasRenderingContext2D.ellipse() de l'API Canvas 2D ajoute une ellipse au trajet, centrée en (x, y), les rayons rayonX et rayonY commençant à angleDeDébut et se terminant à angleDeFin, en allant dans le sens indiqué par antiHoraire (par défaut, horaire).

+ +

Syntaxe

+ +
void ctx.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);
+
+ +

Paramètres

+ +
+
x
+
La coordonnée sur l'axe des x du centre de l'ellipse.
+
y
+
La coordonnée sur l'axe des y du centre de l'ellipse.
+
rayonX
+
Le rayon du grand axe de l'ellipse.
+
rayonY
+
Le rayon du petit axe de l'ellipse.
+
rotation
+
La rotation pour cette ellipse, exprimée en radians.
+
angleDébut
+
L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.
+
angleFin
+
L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.
+
antihoraire {{optional_inline}}
+
Un {{jsxref("Boolean")}} optionnel qui, si true, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.
+
+ +

Exemples

+ +

Utilisation de la méthode ellipse

+ +

Ceci est seulement un fragment de code simple dessinant une ellipse.

+ +

HTML

+ +
<canvas id="canevas"></canvas>
+
+ +

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
+ctx.stroke();
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.ellipse")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html deleted file mode 100644 index f71a817ce6..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: CanvasRenderingContext2D.fill() -slug: Web/API/CanvasRenderingContext2D/fill -tags: - - API - - Canvas - - CanvasRenderingContext2D -translation_of: Web/API/CanvasRenderingContext2D/fill ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.fill() de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.

- -

Syntaxe

- -
void ctx.fill([fillRule]);
-void ctx.fill(path[, fillRule]);
-
- -

Paramètres

- -
-
fillRule
-
L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.
- Valeurs possible: - -
-
path
-
Un chemin {{domxref("Path2D")}} à remplir.
-
- -

Exemples

- -

Utiliser la méthode fill

- -

Ceci est un simple snippet de code qui utilise la méthode fill pour remplir un chemin.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-ctx.rect(10, 10, 100, 100);
-ctx.fill();
-
- -

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Utiliser l'option fillRule

- -

HTML

- -
<canvas id="canvas"></canvas>
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.moveTo(96.50,50.00);
-ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
-ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
-ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
-ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
-ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
-ctx.closePath();
-
-ctx.fillStyle = "lightblue";
-ctx.lineWidth = 2;
-ctx.fill("nonzero");
-ctx.stroke();
- -

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

- -

Code jouable 2

- - - - - -

{{EmbedLiveSample('code_jouable_2', 700, 360)}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.fill")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md new file mode 100644 index 0000000000..f71a817ce6 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -0,0 +1,197 @@ +--- +title: CanvasRenderingContext2D.fill() +slug: Web/API/CanvasRenderingContext2D/fill +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/fill +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.fill() de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.

+ +

Syntaxe

+ +
void ctx.fill([fillRule]);
+void ctx.fill(path[, fillRule]);
+
+ +

Paramètres

+ +
+
fillRule
+
L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.
+ Valeurs possible: + +
+
path
+
Un chemin {{domxref("Path2D")}} à remplir.
+
+ +

Exemples

+ +

Utiliser la méthode fill

+ +

Ceci est un simple snippet de code qui utilise la méthode fill pour remplir un chemin.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Utiliser l'option fillRule

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(96.50,50.00);
+ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
+ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
+ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
+ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
+ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
+ctx.closePath();
+
+ctx.fillStyle = "lightblue";
+ctx.lineWidth = 2;
+ctx.fill("nonzero");
+ctx.stroke();
+ +

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

+ +

Code jouable 2

+ + + + + +

{{EmbedLiveSample('code_jouable_2', 700, 360)}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.fill")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html deleted file mode 100644 index cd98d786b5..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: CanvasRenderingContext2D.fillRect() -slug: Web/API/CanvasRenderingContext2D/fillRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode -translation_of: Web/API/CanvasRenderingContext2D/fillRect ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.fillRect() de l'API 2D des Canvas dessine un rectangle plein aux coordonnées (x, y), aux dimensions déterminées par largeur et hauteur et au style déterminé par l'attribut fillStyle.

- -

Syntaxe

- -
void ctx.fillRect(x, y, largeur, hauteur);
-
- -

Paramètres

- -
-
x
-
L'ordonnée x des coordonnées du point de départ du rectangle.
-
y
-
L'abscisse y des coordonnées du point de départ du rectangle.
-
largeur
-
La largeur du rectangle.
-
hauteur
-
La hauteur de rectangle.
-
- -

Exemples

- -

Utilisation de la méthode fillRect

- -

Ceci est juste un extrait de code qui utilise la méthode fillRect.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-ctx.fillStyle = "green";
-ctx.fillRect(10, 10, 100, 100);
-
-// remplir la balise entièrement
-// ctx.fillRect(0, 0, canvas.width, canvas.height);
-
- -

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.fillRect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md new file mode 100644 index 0000000000..cd98d786b5 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -0,0 +1,124 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +tags: + - API + - Canvas + - CanvasRendering2D + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.fillRect() de l'API 2D des Canvas dessine un rectangle plein aux coordonnées (x, y), aux dimensions déterminées par largeur et hauteur et au style déterminé par l'attribut fillStyle.

+ +

Syntaxe

+ +
void ctx.fillRect(x, y, largeur, hauteur);
+
+ +

Paramètres

+ +
+
x
+
L'ordonnée x des coordonnées du point de départ du rectangle.
+
y
+
L'abscisse y des coordonnées du point de départ du rectangle.
+
largeur
+
La largeur du rectangle.
+
hauteur
+
La hauteur de rectangle.
+
+ +

Exemples

+ +

Utilisation de la méthode fillRect

+ +

Ceci est juste un extrait de code qui utilise la méthode fillRect.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// remplir la balise entièrement
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ +

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.fillRect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html deleted file mode 100644 index 598ec204af..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: CanvasRenderingContext2D.fillStyle -slug: Web/API/CanvasRenderingContext2D/fillStyle -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/fillStyle ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.fillStyle de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est #000 (black).

- -

Voir également le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.fillStyle = color;
-ctx.fillStyle = gradient;
-ctx.fillStyle = pattern;
-
- -

Options

- -
-
color
-
Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.
-
gradient
-
Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
-
pattern
-
Un objet {{domxref("CanvasPattern")}} (une image répétée).
-
- -

Exemples

- -

Utiliser la propriété fillStyle pour définir une couleur différente

- -

Ceci est un simple snippet de code utilisant la propriété fillStyle pour définir une couleur différente.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'blue';
-ctx.fillRect(10, 10, 100, 100);
-
- -

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Un exemple fillStyle avec les boucles for

- -

Dans cet exemple, nous allons utiliser deux boucles for pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables i et j pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.

- - - - - - -

Le résultat devrait ressembler à ça:

- -

{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.fillStyle")}}

- - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md new file mode 100644 index 0000000000..598ec204af --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -0,0 +1,158 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.fillStyle de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est #000 (black).

+ +

Voir également le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

Options

+ +
+
color
+
Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.
+
gradient
+
Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
+
pattern
+
Un objet {{domxref("CanvasPattern")}} (une image répétée).
+
+ +

Exemples

+ +

Utiliser la propriété fillStyle pour définir une couleur différente

+ +

Ceci est un simple snippet de code utilisant la propriété fillStyle pour définir une couleur différente.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Un exemple fillStyle avec les boucles for

+ +

Dans cet exemple, nous allons utiliser deux boucles for pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables i et j pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.

+ + + + + + +

Le résultat devrait ressembler à ça:

+ +

{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.fillStyle")}}

+ + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html deleted file mode 100644 index fefd1c875a..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: CanvasRenderingContext2D.fillText() -slug: Web/API/CanvasRenderingContext2D/fillText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/fillText ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.fillText() de l'API Canvas 2D écrit un texte donné à la position (x, y) donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.

- -

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.

- -

Syntaxe

- -
void ctx.fillText(texte, x, y [, largeurMax]);
-
- -

Paramètres

- -
-
texte
-
Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.
-
- -
-
x
-
La valeur de la coordonnée sur l'axe des x du point de début du texte.
-
y
-
La valeur de la coordonnée sur l'axe des y du point de fin du texte.
-
largeurMax {{optional_inline}}
-
La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.
-
- -

Exemples

- -

Utilisation de la méthode fillText

- -

Ceci est seulement un fragment de code simple utilisant la méthode fillText.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.fillText('Hello world', 50, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.fillText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md new file mode 100644 index 0000000000..fefd1c875a --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -0,0 +1,126 @@ +--- +title: CanvasRenderingContext2D.fillText() +slug: Web/API/CanvasRenderingContext2D/fillText +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/fillText +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.fillText() de l'API Canvas 2D écrit un texte donné à la position (x, y) donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.

+ +

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.

+ +

Syntaxe

+ +
void ctx.fillText(texte, x, y [, largeurMax]);
+
+ +

Paramètres

+ +
+
texte
+
Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.
+
+ +
+
x
+
La valeur de la coordonnée sur l'axe des x du point de début du texte.
+
y
+
La valeur de la coordonnée sur l'axe des y du point de fin du texte.
+
largeurMax {{optional_inline}}
+
La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.
+
+ +

Exemples

+ +

Utilisation de la méthode fillText

+ +

Ceci est seulement un fragment de code simple utilisant la méthode fillText.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.fillText('Hello world', 50, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.fillText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.html b/files/fr/web/api/canvasrenderingcontext2d/font/index.html deleted file mode 100644 index 34b90f9580..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: CanvasRenderingContext2D.font -slug: Web/API/CanvasRenderingContext2D/font -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/font ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.font de l'API Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de police CSS. La police par défaut est 10px sans-serif.

- -

Syntaxe

- -
ctx.font = value;
-
- -

Options

- -
-
valeur
-
Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.
-
- -

Exemples

- -

Utilisation de la propriété font

- -

Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.strokeText('Hello world', 50, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Chargement de polices avec l'API CSS Font Loading

- -

A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.

- -
var f = new FontFace('test', 'url(x)');
-
-f.load().then(function() {
-  // Prêt à utiliser la police dans un contexte de canevas
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.font")}}

- -

Notes spécifiques à Gecko

- - - -

Notes relatives à Quantum

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md new file mode 100644 index 0000000000..34b90f9580 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -0,0 +1,136 @@ +--- +title: CanvasRenderingContext2D.font +slug: Web/API/CanvasRenderingContext2D/font +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/font +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.font de l'API Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de police CSS. La police par défaut est 10px sans-serif.

+ +

Syntaxe

+ +
ctx.font = value;
+
+ +

Options

+ +
+
valeur
+
Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.
+
+ +

Exemples

+ +

Utilisation de la propriété font

+ +

Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Chargement de polices avec l'API CSS Font Loading

+ +

A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.

+ +
var f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Prêt à utiliser la police dans un contexte de canevas
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.font")}}

+ +

Notes spécifiques à Gecko

+ + + +

Notes relatives à Quantum

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html deleted file mode 100644 index 94059efba8..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: CanvasRenderingContext2D.getImageData() -slug: Web/API/CanvasRenderingContext2D/getImageData -tags: - - API - - Canvas - - Canvas API - - CanvasRenderingContext2D - - Image - - ImageData - - Méthode - - Méthodes - - References - - getImageDate -translation_of: Web/API/CanvasRenderingContext2D/getImageData ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.getImageData() de l'API Canvas 2D retourne un  objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions (sx, sy) et qui possède des attributs : largeur (sw) et hauteur (sh). Cette méthode n'est pas affectée par la matrice de transformation du canevas.

- -

Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.

- -

Syntaxe

- -
ImageData ctx.getImageData(sx, sy, sw, sh);
-
- -

Paramètres

- -
-
sx
-
La coordonnée x du coin supérieur gauche du rectangle à partir duquel ImageData sera extrait.
-
sy
-
La coordonnée y du coin supérieur gauche du rectangle à partir duquel ImageData  sera extrait.
-
sw
-
La largeur du rectangle à partir duquel ImageData sera extrait.
-
sh
-
La hauteur du rectangle à partir duquel ImageData sera extrait.
-
- -

Valeur retournée

- -

Un objet {{domxref("ImageData")}}  contenant les données de l'image pour le rectangle donné du canevas.

- -

Erreurs renvoyées

- -
-
IndexSizeError
-
Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro.
-
- -

Exemples

- -

Utilisation de la méthode  getImageData

- -

Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  Manipulation de pixels avec canvas et l'objet {{domxref("ImageData")}}.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-ctx.rect(10, 10, 100, 100);
-ctx.fill();
-
-console.log(ctx.getImageData(50, 50, 100, 100));
-// ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] }
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md new file mode 100644 index 0000000000..94059efba8 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md @@ -0,0 +1,101 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +tags: + - API + - Canvas + - Canvas API + - CanvasRenderingContext2D + - Image + - ImageData + - Méthode + - Méthodes + - References + - getImageDate +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.getImageData() de l'API Canvas 2D retourne un  objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions (sx, sy) et qui possède des attributs : largeur (sw) et hauteur (sh). Cette méthode n'est pas affectée par la matrice de transformation du canevas.

+ +

Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.

+ +

Syntaxe

+ +
ImageData ctx.getImageData(sx, sy, sw, sh);
+
+ +

Paramètres

+ +
+
sx
+
La coordonnée x du coin supérieur gauche du rectangle à partir duquel ImageData sera extrait.
+
sy
+
La coordonnée y du coin supérieur gauche du rectangle à partir duquel ImageData  sera extrait.
+
sw
+
La largeur du rectangle à partir duquel ImageData sera extrait.
+
sh
+
La hauteur du rectangle à partir duquel ImageData sera extrait.
+
+ +

Valeur retournée

+ +

Un objet {{domxref("ImageData")}}  contenant les données de l'image pour le rectangle donné du canevas.

+ +

Erreurs renvoyées

+ +
+
IndexSizeError
+
Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro.
+
+ +

Exemples

+ +

Utilisation de la méthode  getImageData

+ +

Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  Manipulation de pixels avec canvas et l'objet {{domxref("ImageData")}}.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] }
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html deleted file mode 100644 index 5b404da724..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: CanvasRenderingContext2D.globalAlpha -slug: Web/API/CanvasRenderingContext2D/globalAlpha -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/globalAlpha ---- -
{{APIRef}}
- -
La propriété CanvasRenderingContext2D.globalAlpha de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque).
- -
 
- -

Voir aussi le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.globalAlpha = valeur;
-
- -

Options

- -
-
valeur
-
Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et globalAlpha conservera sa valeur précédente.
-
- -

Exemples

- -

Utilisation de la propriété globalAlpha

- -

Il s'agit seulement d'un simple fragment de code utilisant la propriété globalAlpha pour dessiner deux rectangles semi-transparents.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.globalAlpha = 0.5;
-
-ctx.fillStyle = "blue";
-ctx.fillRect(10, 10, 100, 100);
-
-ctx.fillStyle = "red";
-ctx.fillRect(50, 50, 100, 100);
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 380) }}

- -

Un exemple de globalAlpha

- -

Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle for dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.

- -
var ctx = document.getElementById('canevas').getContext('2d');
-
-// Dessiner l'arrière-plan
-ctx.fillStyle = '#FD0';
-ctx.fillRect(0, 0, 75, 75);
-ctx.fillStyle = '#6C0';
-ctx.fillRect(75, 0, 75, 75);
-ctx.fillStyle = '#09F';
-ctx.fillRect(0, 75, 75, 75);
-ctx.fillStyle = '#F30';
-ctx.fillRect(75, 75, 75, 75);
-ctx.fillStyle = '#FFF';
-
-// Définir la valeur de transparence
-ctx.globalAlpha = 0.2;
-
-// Dessiner les cercles semi-transparents
-for (i = 0; i < 7; i++){
-  ctx.beginPath();
-  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
-  ctx.fill();
-}
-
- - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}

- -

Notes spécifiques à Gecko

- - - - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md new file mode 100644 index 0000000000..5b404da724 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -0,0 +1,173 @@ +--- +title: CanvasRenderingContext2D.globalAlpha +slug: Web/API/CanvasRenderingContext2D/globalAlpha +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/globalAlpha +--- +
{{APIRef}}
+ +
La propriété CanvasRenderingContext2D.globalAlpha de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque).
+ +
 
+ +

Voir aussi le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.globalAlpha = valeur;
+
+ +

Options

+ +
+
valeur
+
Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et globalAlpha conservera sa valeur précédente.
+
+ +

Exemples

+ +

Utilisation de la propriété globalAlpha

+ +

Il s'agit seulement d'un simple fragment de code utilisant la propriété globalAlpha pour dessiner deux rectangles semi-transparents.

+ +

HTML

+ +
<canvas id="canevas"></canvas>
+
+ +

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = "red";
+ctx.fillRect(50, 50, 100, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 380) }}

+ +

Un exemple de globalAlpha

+ +

Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle for dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.

+ +
var ctx = document.getElementById('canevas').getContext('2d');
+
+// Dessiner l'arrière-plan
+ctx.fillStyle = '#FD0';
+ctx.fillRect(0, 0, 75, 75);
+ctx.fillStyle = '#6C0';
+ctx.fillRect(75, 0, 75, 75);
+ctx.fillStyle = '#09F';
+ctx.fillRect(0, 75, 75, 75);
+ctx.fillStyle = '#F30';
+ctx.fillRect(75, 75, 75, 75);
+ctx.fillStyle = '#FFF';
+
+// Définir la valeur de transparence
+ctx.globalAlpha = 0.2;
+
+// Dessiner les cercles semi-transparents
+for (i = 0; i < 7; i++){
+  ctx.beginPath();
+  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+  ctx.fill();
+}
+
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}

+ +

Notes spécifiques à Gecko

+ + + + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html deleted file mode 100644 index 7291e23e2b..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: CanvasRenderingContext2D.globalCompositeOperation -slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation -translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.globalCompositeOperation de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.

- -

Voir aussi Composition et découpe dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.globalCompositeOperation = type;
- -

type est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.

- -

Types

- -

{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

- -

Examples

- -

Changer l'opération de composition

- -

Cet exemple utilise la propriété globalCompositeOperation pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-ctx.globalCompositeOperation = 'xor';
-
-ctx.fillStyle = 'blue';
-ctx.fillRect(10, 10, 100, 100);
-
-ctx.fillStyle = 'red';
-ctx.fillRect(50, 50, 100, 100);
-
- -

Résultat

- -

{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationEtatCommentaires
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}{{Spec2('HTML WHATWG')}}
{{SpecName('Compositing')}}{{Spec2('Compositing')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}

- - - - - -

Remarques concernant Gecko

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md new file mode 100644 index 0000000000..7291e23e2b --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -0,0 +1,95 @@ +--- +title: CanvasRenderingContext2D.globalCompositeOperation +slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation +translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.globalCompositeOperation de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.

+ +

Voir aussi Composition et découpe dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.globalCompositeOperation = type;
+ +

type est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.

+ +

Types

+ +

{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

Examples

+ +

Changer l'opération de composition

+ +

Cet exemple utilise la propriété globalCompositeOperation pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.globalCompositeOperation = 'xor';
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationEtatCommentaires
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}{{Spec2('HTML WHATWG')}}
{{SpecName('Compositing')}}{{Spec2('Compositing')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}

+ + + + + +

Remarques concernant Gecko

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html deleted file mode 100644 index d9064377d8..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: CanvasRenderingContext2D.imageSmoothingEnabled -slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled -tags: - - API - - Canevas - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled ---- -
{{APIRef}} {{SeeCompatTable}}
- -

La propriété CanvasRenderingContext2D.imageSmoothingEnabled de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (true, par défaut) ou non (false). Lors de la récupération de la propriété imageSmoothingEnabled, la dernière valeur à laquelle elle a été définie est renvoyée.

- -

Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à false dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.

- -

Syntaxe

- -
ctx.imageSmoothingEnabled = valeur;
- -

Options

- -
-
valeur
-
Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.
-
- -

exemples

- -

Désactiver le lissage d'image

- -

Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.

- -

HTML

- -
<canvas id="canvas" width="460" height="210"></canvas>
-
- -

JavaScript

- -
const canvas = document.getElementById('canvas');
-
-const ctx = canvas.getContext('2d');
-ctx.font = '16px sans-serif';
-ctx.textAlign = 'center';
-
-const img = new Image();
-img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png';
-img.onload = function() {
-  const w = img.width,
-        h = img.height;
-
-  ctx.fillText('Source', w * .5, 20);
-  ctx.drawImage(img, 0, 24, w, h);
-
-  ctx.fillText('Smoothing = TRUE', w * 2.5, 20);
-  ctx.imageSmoothingEnabled = true;
-  ctx.drawImage(img, w, 24, w * 3, h * 3);
-
-  ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
-  ctx.imageSmoothingEnabled = false;
-  ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
-};
-
- -

Résultat

- -

{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md new file mode 100644 index 0000000000..d9064377d8 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -0,0 +1,99 @@ +--- +title: CanvasRenderingContext2D.imageSmoothingEnabled +slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +tags: + - API + - Canevas + - Canvas + - CanvasRenderingContext2D + - Experimental + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

La propriété CanvasRenderingContext2D.imageSmoothingEnabled de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (true, par défaut) ou non (false). Lors de la récupération de la propriété imageSmoothingEnabled, la dernière valeur à laquelle elle a été définie est renvoyée.

+ +

Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à false dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.

+ +

Syntaxe

+ +
ctx.imageSmoothingEnabled = valeur;
+ +

Options

+ +
+
valeur
+
Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.
+
+ +

exemples

+ +

Désactiver le lissage d'image

+ +

Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.

+ +

HTML

+ +
<canvas id="canvas" width="460" height="210"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+
+const ctx = canvas.getContext('2d');
+ctx.font = '16px sans-serif';
+ctx.textAlign = 'center';
+
+const img = new Image();
+img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png';
+img.onload = function() {
+  const w = img.width,
+        h = img.height;
+
+  ctx.fillText('Source', w * .5, 20);
+  ctx.drawImage(img, 0, 24, w, h);
+
+  ctx.fillText('Smoothing = TRUE', w * 2.5, 20);
+  ctx.imageSmoothingEnabled = true;
+  ctx.drawImage(img, w, 24, w * 3, h * 3);
+
+  ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
+};
+
+ +

Résultat

+ +

{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.html b/files/fr/web/api/canvasrenderingcontext2d/index.html deleted file mode 100644 index 73758824a3..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: CanvasRenderingContext2D -slug: Web/API/CanvasRenderingContext2D -tags: - - API - - Canvas - - CanvasRenderingContext2D - - graphique -translation_of: Web/API/CanvasRenderingContext2D ---- -

{{APIRef}}

- -

L'interface CanvasRenderingContext2D est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.

- -

Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <canvas>, en fournissant "2d" comme argument :

- -
var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
-var ctx = canevas.getContext('2d');
-
- -

Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :

- -
ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle
-ctx.fillRect(10, 10, 55, 50);   // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50
-
- -

Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le tutoriel canvas a davantage d'informations, d'exemples et de ressources également.

- -

Dessin de rectangles

- -

Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.

- -
-
{{domxref("CanvasRenderingContext2D.clearRect()")}}
-
Initialise tous les pixels dans le rectangle défini par le point de départ (x, y) et la taille (largeur, hauteur) à noir transparent, en effaçant tout contenu précédemment dessiné.
-
{{domxref("CanvasRenderingContext2D.fillRect()")}}
-
Dessine un rectangle rempli à la position (x, y) dont la taille est déterminée par largeur et hauteur.
-
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
-
Peint un rectangle ayant un point de départ en (x, y), une largeur l et une hauteur h sur le canevas, en utilisant le style de trait en cours.
-
- -

Dessiner du texte

- -

Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.

- -
-
{{domxref("CanvasRenderingContext2D.fillText()")}}
-
Dessine (rempli) un texte donné à la position (x,y) donnée.
-
{{domxref("CanvasRenderingContext2D.strokeText()")}}
-
Dessine (contour) un texte donné à la position (x, y) donnée.
-
{{domxref("CanvasRenderingContext2D.measureText()")}}
-
Renvoie un objet {{domxref("TextMetrics")}}.
-
- -

Styles de ligne

- -

Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth")}}
-
Largeur des lignes. Défaut 1.0
-
{{domxref("CanvasRenderingContext2D.lineCap")}}
-
Type de finission pour la fin de la ligne. Valeurs possible: butt (défaut), round, square.
-
{{domxref("CanvasRenderingContext2D.lineJoin")}}
-
Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: round, bevel, miter (défaut).
-
{{domxref("CanvasRenderingContext2D.miterLimit")}}
-
Le taux limite du miter. Sa valeur par défaut est 10.
-
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
-
Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.
-
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
-
Définit le modèle du trait courant.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
-
Specifies where to start a dash array on a line.
-
- -

Styles de texte

- -

Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.

- -
-
{{domxref("CanvasRenderingContext2D.font")}}
-
Paramètre de fonte dont la valeur par défaut est 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign")}}
-
Paramètre d’alignement horizontal. Ses valeurs possibles sont : start (par défaut), end, left, right et center.
-
{{domxref("CanvasRenderingContext2D.textBaseline")}}
-
Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : top, hanging, middle, alphabetic (par défaut), ideographic, bottom.
-
{{domxref("CanvasRenderingContext2D.direction")}}
-
Direction d’affichage. Ses valeurs possibles sont : ltr, rtl, inherit (par défaut).
-
- -

Fill and stroke styles

- -

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle")}}
-
Color or style to use inside shapes. Default #000 (black).
-
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
-
Color or style to use for the lines around shapes. Default #000 (black).
-
- -

Gradients and patterns

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
-
Creates a linear gradient along the line given by the coordinates represented by the parameters.
-
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
-
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
-
{{domxref("CanvasRenderingContext2D.createPattern()")}}
-
Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
-
- -

Shadows

- -
-
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
-
Specifies the blurring effect. Default 0
-
{{domxref("CanvasRenderingContext2D.shadowColor")}}
-
Color of the shadow. Default fully-transparent black.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
-
Horizontal distance the shadow will be offset. Default 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
-
Vertical distance the shadow will be offset. Default 0.
-
- -

Paths

- -

The following methods can be used to manipulate paths of objects.

- -
-
{{domxref("CanvasRenderingContext2D.beginPath()")}}
-
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
-
{{domxref("CanvasRenderingContext2D.closePath()")}}
-
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
-
{{domxref("CanvasRenderingContext2D.moveTo()")}}
-
Moves the starting point of a new sub-path to the (x, y) coordinates.
-
{{domxref("CanvasRenderingContext2D.lineTo()")}}
-
Connects the last point in the subpath to the x, y coordinates with a straight line.
-
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
-
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo()before creating the Bézier curve.
-
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
-
Adds a quadratic Bézier curve to the current path.
-
{{domxref("CanvasRenderingContext2D.arc()")}}
-
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
-
{{domxref("CanvasRenderingContext2D.arcTo()")}}
-
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
-
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
-
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
-
{{domxref("CanvasRenderingContext2D.rect()")}}
-
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
-
- -

Drawing paths

- -
-
{{domxref("CanvasRenderingContext2D.fill()")}}
-
Fills the subpaths with the current fill style.
-
{{domxref("CanvasRenderingContext2D.stroke()")}}
-
Strokes the subpaths with the current stroke style.
-
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
-
If a given element is focused, this method draws a focus ring around the current path.
-
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
-
Scrolls the current path or a given path into the view.
-
{{domxref("CanvasRenderingContext2D.clip()")}}
-
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
-
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
-
Reports whether or not the specified point is contained in the current path.
-
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
-
Reports whether or not the specified point is inside the area contained by the stroking of a path.
-
- -

Transformations

- -

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

- -
-
{{domxref("CanvasRenderingContext2D.currentTransform")}}
-
Current transformation matrix ({{domxref("SVGMatrix")}} object).
-
{{domxref("CanvasRenderingContext2D.rotate()")}}
-
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
-
{{domxref("CanvasRenderingContext2D.scale()")}}
-
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
-
{{domxref("CanvasRenderingContext2D.translate()")}}
-
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
-
{{domxref("CanvasRenderingContext2D.transform()")}}
-
Multiplies the current transformation matrix with the matrix described by its arguments.
-
{{domxref("CanvasRenderingContext2D.setTransform()")}}
-
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
-
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
-
Resets the current transform by the identity matrix.
-
- -

Compositing

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
-
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0(opaque).
-
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
-
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.
-
- -

Drawing images

- -
-
{{domxref("CanvasRenderingContext2D.drawImage()")}}
-
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
-
- -

Pixel manipulation

- -

See also the {{domxref("ImageData")}} object.

- -
-
{{domxref("CanvasRenderingContext2D.createImageData()")}}
-
Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
-
{{domxref("CanvasRenderingContext2D.getImageData()")}}
-
Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
-
{{domxref("CanvasRenderingContext2D.putImageData()")}}
-
Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
-
- -

Image smoothing

- -
-
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
-
Image smoothing mode; if disabled, images will not be smoothed if scaled.
-
- -

The canvas state

- -

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

- -
-
{{domxref("CanvasRenderingContext2D.save()")}}
-
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
-
{{domxref("CanvasRenderingContext2D.restore()")}}
-
Restores the drawing style state to the last element on the 'state stack' saved by save().
-
{{domxref("CanvasRenderingContext2D.canvas")}}
-
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
-
- -

Hit regions

- -
-
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
-
Adds a hit region to the canvas.
-
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
-
Removes the hit region with the specified id from the canvas.
-
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
-
Removes all hit regions from the canvas.
-
- -

Non-standard APIs

- - - -

Most of these APIs are deprecated and will be removed in the future.

- -
-
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
-
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
-
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
-
This is redundant with an equivalent overload of drawImage.
-
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
-
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
-
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
-
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
-
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
-
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
-
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
-
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
-
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
-
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
-
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
-
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
-
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
-
- - - -
-
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
-
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
-
- -

WebKit only

- -
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
-
The backing store size in relation to the canvas element. See High DPI Canvas.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
-
Intended for HD backing stores, but removed from canvas specifications.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
-
Intended for HD backing stores, but removed from canvas specifications.
-
- -
-
- -

Gecko only

- -
-
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
-
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
-
- -

Prefixed APIs

- -
-
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
-
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
-
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
-
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
-
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
-
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
-
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
-
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
-
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
-
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
-
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
-
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
-
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
-
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
-
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
-
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
-
- -

Internal APIs (chrome-context only)

- -
-
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
-
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
-
{{non-standard_inline}} CanvasRenderingContext2D.demote()
-
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
-
- -

Internet Explorer

- -
-
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
-
The fill rule to use. This must be one of evenodd or nonzero (default).
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- -

{{Compat("api.CanvasRenderingContext2D")}}

- -

See also

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.md b/files/fr/web/api/canvasrenderingcontext2d/index.md new file mode 100644 index 0000000000..73758824a3 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/index.md @@ -0,0 +1,380 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - graphique +translation_of: Web/API/CanvasRenderingContext2D +--- +

{{APIRef}}

+ +

L'interface CanvasRenderingContext2D est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.

+ +

Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <canvas>, en fournissant "2d" comme argument :

+ +
var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
+var ctx = canevas.getContext('2d');
+
+ +

Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :

+ +
ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle
+ctx.fillRect(10, 10, 55, 50);   // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50
+
+ +

Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le tutoriel canvas a davantage d'informations, d'exemples et de ressources également.

+ +

Dessin de rectangles

+ +

Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Initialise tous les pixels dans le rectangle défini par le point de départ (x, y) et la taille (largeur, hauteur) à noir transparent, en effaçant tout contenu précédemment dessiné.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Dessine un rectangle rempli à la position (x, y) dont la taille est déterminée par largeur et hauteur.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Peint un rectangle ayant un point de départ en (x, y), une largeur l et une hauteur h sur le canevas, en utilisant le style de trait en cours.
+
+ +

Dessiner du texte

+ +

Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Dessine (rempli) un texte donné à la position (x,y) donnée.
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Dessine (contour) un texte donné à la position (x, y) donnée.
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Renvoie un objet {{domxref("TextMetrics")}}.
+
+ +

Styles de ligne

+ +

Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Largeur des lignes. Défaut 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Type de finission pour la fin de la ligne. Valeurs possible: butt (défaut), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: round, bevel, miter (défaut).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Le taux limite du miter. Sa valeur par défaut est 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Définit le modèle du trait courant.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Specifies where to start a dash array on a line.
+
+ +

Styles de texte

+ +

Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Paramètre de fonte dont la valeur par défaut est 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Paramètre d’alignement horizontal. Ses valeurs possibles sont : start (par défaut), end, left, right et center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : top, hanging, middle, alphabetic (par défaut), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Direction d’affichage. Ses valeurs possibles sont : ltr, rtl, inherit (par défaut).
+
+ +

Fill and stroke styles

+ +

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Color or style to use inside shapes. Default #000 (black).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Color or style to use for the lines around shapes. Default #000 (black).
+
+ +

Gradients and patterns

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Creates a linear gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
+
+ +

Shadows

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Specifies the blurring effect. Default 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Color of the shadow. Default fully-transparent black.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Horizontal distance the shadow will be offset. Default 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Vertical distance the shadow will be offset. Default 0.
+
+ +

Paths

+ +

The following methods can be used to manipulate paths of objects.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Moves the starting point of a new sub-path to the (x, y) coordinates.
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Connects the last point in the subpath to the x, y coordinates with a straight line.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo()before creating the Bézier curve.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Adds a quadratic Bézier curve to the current path.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
+
+ +

Drawing paths

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Fills the subpaths with the current fill style.
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Strokes the subpaths with the current stroke style.
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
If a given element is focused, this method draws a focus ring around the current path.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Scrolls the current path or a given path into the view.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Reports whether or not the specified point is contained in the current path.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Reports whether or not the specified point is inside the area contained by the stroking of a path.
+
+ +

Transformations

+ +

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}}
+
Current transformation matrix ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Multiplies the current transformation matrix with the matrix described by its arguments.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Resets the current transform by the identity matrix.
+
+ +

Compositing

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0(opaque).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.
+
+ +

Drawing images

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
+
+ +

Pixel manipulation

+ +

See also the {{domxref("ImageData")}} object.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
+
+ +

Image smoothing

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Image smoothing mode; if disabled, images will not be smoothed if scaled.
+
+ +

The canvas state

+ +

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

Hit regions

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

Non-standard APIs

+ + + +

Most of these APIs are deprecated and will be removed in the future.

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{Compat("api.CanvasRenderingContext2D")}}

+ +

See also

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html deleted file mode 100644 index ee87a2aafe..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: CanvasRenderingContext2D.lineCap -slug: Web/API/CanvasRenderingContext2D/lineCap -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/lineCap ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.lineCap de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : butt, round et square. Par défaut, cette propriété est définie comme butt.

- -

Voir aussi le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.lineCap = "butt";
-ctx.lineCap = "round";
-ctx.lineCap = "square";
- -

Options

- -
-
butt
-
Les extrémités de ligne sont coupées à angle droit.
-
round
-
Les extrémités de ligne sont arrondies.
-
square
-
Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.
-
- -

Exemples

- -

Utilisation de la propriété lineCap

- -

Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.beginPath();
-ctx.moveTo(0, 0);
-ctx.lineWidth = 15;
-ctx.lineCap = 'round';
-ctx.lineTo(100, 100);
-ctx.stroke();
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Un exemple de lineCap

- -

Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété lineCap. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.

- -

La ligne à gauche utilise l'option par défaut butt. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option round. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option square. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.

- -
var ctx = document.getElementById('canevas').getContext('2d');
-var lineCap = ['butt','round','square'];
-
-// Dessiner les guides
-ctx.strokeStyle = '#09f';
-ctx.beginPath();
-ctx.moveTo(10, 10);
-ctx.lineTo(140, 10);
-ctx.moveTo(10, 140);
-ctx.lineTo(140, 140);
-ctx.stroke();
-
-// Dessiner les lignes
-ctx.strokeStyle = 'black';
-for (var i = 0; i < lineCap.length; i++) {
-  ctx.lineWidth = 15;
-  ctx.lineCap = lineCap[i];
-  ctx.beginPath();
-  ctx.moveTo(25 + i * 50, 10);
-  ctx.lineTo(25 + i * 50, 140);
-  ctx.stroke();
-}
-
- - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

- - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md new file mode 100644 index 0000000000..ee87a2aafe --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -0,0 +1,171 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.lineCap de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : butt, round et square. Par défaut, cette propriété est définie comme butt.

+ +

Voir aussi le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.lineCap = "butt";
+ctx.lineCap = "round";
+ctx.lineCap = "square";
+ +

Options

+ +
+
butt
+
Les extrémités de ligne sont coupées à angle droit.
+
round
+
Les extrémités de ligne sont arrondies.
+
square
+
Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.
+
+ +

Exemples

+ +

Utilisation de la propriété lineCap

+ +

Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies.

+ +

HTML

+ +
<canvas id="canevas"></canvas>
+
+ +

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(0, 0);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Un exemple de lineCap

+ +

Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété lineCap. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.

+ +

La ligne à gauche utilise l'option par défaut butt. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option round. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option square. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.

+ +
var ctx = document.getElementById('canevas').getContext('2d');
+var lineCap = ['butt','round','square'];
+
+// Dessiner les guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Dessiner les lignes
+ctx.strokeStyle = 'black';
+for (var i = 0; i < lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

+ + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html deleted file mode 100644 index 93b38bb13d..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: CanvasRenderingContext2D.lineJoin -slug: Web/API/CanvasRenderingContext2D/lineJoin -tags: - - API - - Canvas - - Propriété - - arrondit - - coin - - stroke -translation_of: Web/API/CanvasRenderingContext2D/lineJoin ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.lineJoin de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.

- -

Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.

- -
-

Note: Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.

-
- -

Syntaxe

- -
ctx.lineJoin = "bevel" || "round" || "miter";
-
- -

Options

- -

Il y a trois valeurs possibles pour cette propriété: "round", "bevel" et "miter". Celle par défaut est "miter".

- -

- -
-
"round" (rond)
-
Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .
-
"bevel" (biseau)
-
Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.
-
"miter" (onglet)
-
Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.
-
- -

Exemples

- -

Modifier les jointures d'un tracé

- -

Cet exemple applique des jointures arrondies au tracé.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-ctx.lineWidth = 20;
-ctx.lineJoin = 'round';
-ctx.beginPath();
-ctx.moveTo(20, 20);
-ctx.lineTo(190, 100);
-ctx.lineTo(280, 20);
-ctx.lineTo(280, 150);
-ctx.stroke();
-
- -

Résultat

- -

{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}

- -

Comparaison des jointures de lignes

- -

L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de lineJoin.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var lineJoin = ['round', 'bevel', 'miter'];
-ctx.lineWidth = 10;
-
-for (let i = 0; i < lineJoin.length; i++) {
-  ctx.lineJoin = lineJoin[i];
-  ctx.beginPath();
-  ctx.moveTo(-5, 5 + i * 40);
-  ctx.lineTo(35, 45 + i * 40);
-  ctx.lineTo(75, 5 + i * 40);
-  ctx.lineTo(115, 45 + i * 40);
-  ctx.lineTo(155, 5 + i * 40);
-  ctx.stroke();
-}
-
- -

{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des naviagateurs

- - - -

{{Compat("api.CanvasRenderingContext2D.lineJoin")}}

- - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md new file mode 100644 index 0000000000..93b38bb13d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -0,0 +1,133 @@ +--- +title: CanvasRenderingContext2D.lineJoin +slug: Web/API/CanvasRenderingContext2D/lineJoin +tags: + - API + - Canvas + - Propriété + - arrondit + - coin + - stroke +translation_of: Web/API/CanvasRenderingContext2D/lineJoin +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.lineJoin de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.

+ +

Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.

+ +
+

Note: Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.

+
+ +

Syntaxe

+ +
ctx.lineJoin = "bevel" || "round" || "miter";
+
+ +

Options

+ +

Il y a trois valeurs possibles pour cette propriété: "round", "bevel" et "miter". Celle par défaut est "miter".

+ +

+ +
+
"round" (rond)
+
Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .
+
"bevel" (biseau)
+
Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.
+
"miter" (onglet)
+
Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.
+
+ +

Exemples

+ +

Modifier les jointures d'un tracé

+ +

Cet exemple applique des jointures arrondies au tracé.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 20;
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(190, 100);
+ctx.lineTo(280, 20);
+ctx.lineTo(280, 150);
+ctx.stroke();
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}

+ +

Comparaison des jointures de lignes

+ +

L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de lineJoin.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var lineJoin = ['round', 'bevel', 'miter'];
+ctx.lineWidth = 10;
+
+for (let i = 0; i < lineJoin.length; i++) {
+  ctx.lineJoin = lineJoin[i];
+  ctx.beginPath();
+  ctx.moveTo(-5, 5 + i * 40);
+  ctx.lineTo(35, 45 + i * 40);
+  ctx.lineTo(75, 5 + i * 40);
+  ctx.lineTo(115, 45 + i * 40);
+  ctx.lineTo(155, 5 + i * 40);
+  ctx.stroke();
+}
+
+ +

{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des naviagateurs

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineJoin")}}

+ + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html deleted file mode 100644 index 6ed54f222e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CanvasRenderingContext2D.lineTo() -slug: Web/API/CanvasRenderingContext2D/lineTo -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/lineTo ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.lineTo() de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées x, y spécifiées avec une ligne droite (sans tracer réellement le chemin).

- -

Syntaxe

- -
void ctx.lineTo(x, y);
-
- -

Paramètres

- -
-
x
-
L'abscisse x du point d'arrivée.
-
y
-
L'ordonnée y du point d'arrivée.
-
- -

Exemples

- -

Utilisation de la méthode lineTo

- -

Ceci est un extrait de code utilisant la méthode lineTo. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-ctx.beginPath();
-ctx.moveTo(50,50);
-ctx.lineTo(100, 100);
-ctx.stroke();
-
- -

Éditez le code suivant pour voir les changements en direct:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.lineTo")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md new file mode 100644 index 0000000000..6ed54f222e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -0,0 +1,122 @@ +--- +title: CanvasRenderingContext2D.lineTo() +slug: Web/API/CanvasRenderingContext2D/lineTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/lineTo +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.lineTo() de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées x, y spécifiées avec une ligne droite (sans tracer réellement le chemin).

+ +

Syntaxe

+ +
void ctx.lineTo(x, y);
+
+ +

Paramètres

+ +
+
x
+
L'abscisse x du point d'arrivée.
+
y
+
L'ordonnée y du point d'arrivée.
+
+ +

Exemples

+ +

Utilisation de la méthode lineTo

+ +

Ceci est un extrait de code utilisant la méthode lineTo. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Éditez le code suivant pour voir les changements en direct:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.lineTo")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html deleted file mode 100644 index ef2a1af3a9..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CanvasRenderingContext2D.measureText() -slug: Web/API/CanvasRenderingContext2D/measureText -tags: - - API - - Canevas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/measureText ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.measureText() renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).

- -

Syntaxe

- -
ctx.measureText(texte);
- -

Paramètres

- -
-
texte
-
Le texte à mesurer.
-
- -

Valeur retournée

- -

Un objet {{domxref("TextMetrics")}}.

- -

Exemples

- -

Étant donné cet élément {{HTMLElement("canvas")}} :

- -
<canvas id="canevas"></canvas>
-
- -

vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-var texte = ctx.measureText('foo'); // objet TextMetrics
-texte.width; // 16;
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.measureText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md new file mode 100644 index 0000000000..ef2a1af3a9 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md @@ -0,0 +1,73 @@ +--- +title: CanvasRenderingContext2D.measureText() +slug: Web/API/CanvasRenderingContext2D/measureText +tags: + - API + - Canevas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/measureText +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.measureText() renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).

+ +

Syntaxe

+ +
ctx.measureText(texte);
+ +

Paramètres

+ +
+
texte
+
Le texte à mesurer.
+
+ +

Valeur retournée

+ +

Un objet {{domxref("TextMetrics")}}.

+ +

Exemples

+ +

Étant donné cet élément {{HTMLElement("canvas")}} :

+ +
<canvas id="canevas"></canvas>
+
+ +

vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+var texte = ctx.measureText('foo'); // objet TextMetrics
+texte.width; // 16;
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.measureText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html deleted file mode 100644 index 958b41c5aa..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CanvasRenderingContext2D.moveTo() -slug: Web/API/CanvasRenderingContext2D/moveTo -tags: - - API - - Canvas - - CanvasRenderingContext2D -translation_of: Web/API/CanvasRenderingContext2D/moveTo ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.moveTo() de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées (x, y).

- -

Syntaxe

- -
void ctx.moveTo(x, y);
-
- -

Paramètres

- -
-
x
-
L'axe des x du point.
-
y
-
L'axe des y du point.
-
- -

Exemples

- -

Utiliser la méthode moveTo

- -

Ceci est un simple snippet de code qui utilise la méthode moveTo pour déplacer le stylo à une position de départ pour dessiner une ligne.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.moveTo(50, 50);
-ctx.lineTo(200, 50);
-ctx.stroke();
-
- -

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.moveTo")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md new file mode 100644 index 0000000000..958b41c5aa --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -0,0 +1,120 @@ +--- +title: CanvasRenderingContext2D.moveTo() +slug: Web/API/CanvasRenderingContext2D/moveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/moveTo +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.moveTo() de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées (x, y).

+ +

Syntaxe

+ +
void ctx.moveTo(x, y);
+
+ +

Paramètres

+ +
+
x
+
L'axe des x du point.
+
y
+
L'axe des y du point.
+
+ +

Exemples

+ +

Utiliser la méthode moveTo

+ +

Ceci est un simple snippet de code qui utilise la méthode moveTo pour déplacer le stylo à une position de départ pour dessiner une ligne.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(50, 50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+
+ +

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.moveTo")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html deleted file mode 100644 index 7587faa897..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: CanvasRenderingContext2D.quadraticCurveTo() -slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo -tags: - - API - - Bézier - - Canevas - - Canvas - - CanvasRenderingContext2D - - Courbe - - Courbe de Bézier - - Courbe quadratique - - Courbe quadratique de Bézier - - Méthode - - Quadratique - - Reference -translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.quadraticCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.

- -

Syntaxe

- -
void contexte2D.quadraticCurveTo(pointContrôleX, pointContrôleY, pointArrivéeX, pointArrivéeY);
-
- -

Paramètress

- -
-
pointContrôleX
-
La coordonnée en x du point de contrôle.
-
pointContrôleY
-
La coordonnée en y du point de contrôle.
-
pointArrivéeX
-
La coordonnée en x du point d'arrivée.
-
pointArrivéeY
-
La coordonnée en y du point d'arrivée.
-
- -

Exemples

- -

Comment quadraticCurveTo fonctionne

- -

Cet exemple montre comment un courbe quadratique de Bézier est dessinée.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
const canevas = document.getElementById("canvas");
-const contexte2D= canevas.getContext("2d");
-
-// courbe quadratique de Bézier
-contexte2D.beginPath();
-contexte2D.moveTo(50, 20);
-contexte2D.quadraticCurveTo(230, 30, 50, 100);
-contexte2D.stroke();
-
-// Points de départ et d'arrivée
-contexte2D.fillStyle = "blue";
-contexte2D.beginPath();
-contexte2D.arc(50, 20, 5, 0, 2 * Math.PI);   // Point de départ
-contexte2D.arc(50, 100, 5, 0, 2 * Math.PI);  // Point d'arrivée
-contexte2D.fill();
-
-// Point de contrôle
-contexte2D.fillStyle = 'red';
-contexte2D.beginPath();
-contexte2D.arc(230, 30, 5, 0, 2 * Math.PI);
-contexte2D.fill();
-
- -

Résultat

- -

Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.

- -

{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}

- -

Une courbe quadratique simple

- -

Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode quadraticCurveTo().

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -

La courbe commence au point spécifié par moveTo(): (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).

- -
const canevas = document.getElementById("canvas");
-const contexte2D = canevas.getContext("2d");
-
-contexte2D.beginPath();
-contexte2D.moveTo(20, 110);
-contexte2D.quadraticCurveTo(230, 150, 250, 20);
-contexte2D.stroke();
-
- -

Résultat

- -

{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md new file mode 100644 index 0000000000..7587faa897 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -0,0 +1,137 @@ +--- +title: CanvasRenderingContext2D.quadraticCurveTo() +slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo +tags: + - API + - Bézier + - Canevas + - Canvas + - CanvasRenderingContext2D + - Courbe + - Courbe de Bézier + - Courbe quadratique + - Courbe quadratique de Bézier + - Méthode + - Quadratique + - Reference +translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.quadraticCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.

+ +

Syntaxe

+ +
void contexte2D.quadraticCurveTo(pointContrôleX, pointContrôleY, pointArrivéeX, pointArrivéeY);
+
+ +

Paramètress

+ +
+
pointContrôleX
+
La coordonnée en x du point de contrôle.
+
pointContrôleY
+
La coordonnée en y du point de contrôle.
+
pointArrivéeX
+
La coordonnée en x du point d'arrivée.
+
pointArrivéeY
+
La coordonnée en y du point d'arrivée.
+
+ +

Exemples

+ +

Comment quadraticCurveTo fonctionne

+ +

Cet exemple montre comment un courbe quadratique de Bézier est dessinée.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canevas = document.getElementById("canvas");
+const contexte2D= canevas.getContext("2d");
+
+// courbe quadratique de Bézier
+contexte2D.beginPath();
+contexte2D.moveTo(50, 20);
+contexte2D.quadraticCurveTo(230, 30, 50, 100);
+contexte2D.stroke();
+
+// Points de départ et d'arrivée
+contexte2D.fillStyle = "blue";
+contexte2D.beginPath();
+contexte2D.arc(50, 20, 5, 0, 2 * Math.PI);   // Point de départ
+contexte2D.arc(50, 100, 5, 0, 2 * Math.PI);  // Point d'arrivée
+contexte2D.fill();
+
+// Point de contrôle
+contexte2D.fillStyle = 'red';
+contexte2D.beginPath();
+contexte2D.arc(230, 30, 5, 0, 2 * Math.PI);
+contexte2D.fill();
+
+ +

Résultat

+ +

Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.

+ +

{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}

+ +

Une courbe quadratique simple

+ +

Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode quadraticCurveTo().

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +

La courbe commence au point spécifié par moveTo(): (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).

+ +
const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(20, 110);
+contexte2D.quadraticCurveTo(230, 150, 250, 20);
+contexte2D.stroke();
+
+ +

Résultat

+ +

{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html deleted file mode 100644 index 8a822dd115..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CanvasRenderingContext2D.rect() -slug: Web/API/CanvasRenderingContext2D/rect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode -translation_of: Web/API/CanvasRenderingContext2D/rect ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.rect() de l'API Canvas 2D crée un chemin de rectangle à la position (x, y) et de dimensions width et height. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser fill ou stroke pour dessiner ce rectangle.

- -

Syntaxe

- -
void ctx.rect(x, y, width, height);
-
- -

Paramètres

- -
-
x
-
La coordonnée x pour le côté gauche du rectangle.
-
y
-
La coordonnée y pour le haut du rectangle.
-
width
-
La largeur du rectangle.
-
height
-
La hauteur du rectangle.
-
- -

Exemples

- -

Utiliser la méthode rect

- -

Ceci est un simple bout de code qui utilise la méthode rect pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-ctx.rect(10, 10, 100, 100);
-ctx.fill();
-
- -

Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.rect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md new file mode 100644 index 0000000000..8a822dd115 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -0,0 +1,122 @@ +--- +title: CanvasRenderingContext2D.rect() +slug: Web/API/CanvasRenderingContext2D/rect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/rect +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.rect() de l'API Canvas 2D crée un chemin de rectangle à la position (x, y) et de dimensions width et height. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser fill ou stroke pour dessiner ce rectangle.

+ +

Syntaxe

+ +
void ctx.rect(x, y, width, height);
+
+ +

Paramètres

+ +
+
x
+
La coordonnée x pour le côté gauche du rectangle.
+
y
+
La coordonnée y pour le haut du rectangle.
+
width
+
La largeur du rectangle.
+
height
+
La hauteur du rectangle.
+
+ +

Exemples

+ +

Utiliser la méthode rect

+ +

Ceci est un simple bout de code qui utilise la méthode rect pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.rect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html deleted file mode 100644 index 5cde5f8af5..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CanvasRenderingContext2D.rotate() -slug: Web/API/CanvasRenderingContext2D/rotate -tags: - - API - - Cancas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/rotate ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.rotate() de l'API Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.

- -

Syntaxe

- -
void ctx.rotate(angle);
-
- -

- -

Paramètres

- -
-
angle
-
L'angle de rotation horaire en radians. Vous pouvez utiliser degrés * Math.PI / 180 si vous voulez faire la conversion à partir d'une valeur en degrés.
-
- -

Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.

- -

Exemples

- -

Utilisation de la méthode rotate

- -

Ceci est seulement un fragment de code simple qui utilise la méthode rotate.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.rotate(45 * Math.PI / 180);
-ctx.fillRect(70, 0, 100, 30);
-
-// réinitialise la matrice de transformation courante à la matrice identité
-ctx.setTransform(1, 0, 0, 1, 0, 0);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.rotate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md new file mode 100644 index 0000000000..5cde5f8af5 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -0,0 +1,122 @@ +--- +title: CanvasRenderingContext2D.rotate() +slug: Web/API/CanvasRenderingContext2D/rotate +tags: + - API + - Cancas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/rotate +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.rotate() de l'API Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.

+ +

Syntaxe

+ +
void ctx.rotate(angle);
+
+ +

+ +

Paramètres

+ +
+
angle
+
L'angle de rotation horaire en radians. Vous pouvez utiliser degrés * Math.PI / 180 si vous voulez faire la conversion à partir d'une valeur en degrés.
+
+ +

Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.

+ +

Exemples

+ +

Utilisation de la méthode rotate

+ +

Ceci est seulement un fragment de code simple qui utilise la méthode rotate.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70, 0, 100, 30);
+
+// réinitialise la matrice de transformation courante à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.rotate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.html b/files/fr/web/api/canvasrenderingcontext2d/save/index.html deleted file mode 100644 index d91e31ffbe..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/save/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: CanvasRenderingContext2D.save() -slug: Web/API/CanvasRenderingContext2D/save -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Restaurer - - Save -translation_of: Web/API/CanvasRenderingContext2D/save ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.save() de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.

- -

L'état du dessin

- -

L'état du dessin qui est sauvegardé dans une stack se compose de:

- - - -

Syntaxe

- -
void ctx.save();
- -

Exemple

- -

Enregistrer l'état du dessin

- -

Cet exemple utilise la méthode save() pour enregistrer l'état par défaut et restore()  pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-// On sauvegarde l'état par défaut
-ctx.save();
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 100, 100);
-
-// On restaure l'état par défaut
-ctx.restore();
-
-ctx.fillRect(150, 40, 100, 100);
-
- -

Résultat

- -

{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.CanvasRenderingContext2D.save")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.md b/files/fr/web/api/canvasrenderingcontext2d/save/index.md new file mode 100644 index 0000000000..d91e31ffbe --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.md @@ -0,0 +1,91 @@ +--- +title: CanvasRenderingContext2D.save() +slug: Web/API/CanvasRenderingContext2D/save +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Restaurer + - Save +translation_of: Web/API/CanvasRenderingContext2D/save +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.save() de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.

+ +

L'état du dessin

+ +

L'état du dessin qui est sauvegardé dans une stack se compose de:

+ + + +

Syntaxe

+ +
void ctx.save();
+ +

Exemple

+ +

Enregistrer l'état du dessin

+ +

Cet exemple utilise la méthode save() pour enregistrer l'état par défaut et restore()  pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// On sauvegarde l'état par défaut
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// On restaure l'état par défaut
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.CanvasRenderingContext2D.save")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html deleted file mode 100644 index cb24a37aa0..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: CanvasRenderingContext2D.scale() -slug: Web/API/CanvasRenderingContext2D/scale -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) -translation_of: Web/API/CanvasRenderingContext2D/scale ---- -
{{APIRef}}
- -

La méhode CanvasRenderingContext2D.scale() de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.

- -

Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.

- -

Syntaxe

- -
void ctx.scale(x, y);
-
- -

Paramètres

- -
-
x
-
Facteur d'échelle dans la direction horizontale.
-
y
-
Facteur d'échelle dans la direction verticale.
-
- -

Exemples

- -

Utilisation de la méthode scale

- -

Ceci est seulement un fragment de code simple qui utilise la méthode scale.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.scale(10, 3);
-ctx.fillRect(10, 10, 10, 10);
-
-// remet la matrice de transformation courante à la matrice identité
-ctx.setTransform(1, 0, 0, 1, 0, 0);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Utilisation de scale pour un retournement horizontal ou vertical

- -

Vous pouvez utiliser ctx.scale(-1, 1) pour retourner le contexte horizontalement et ctx.scale(1, -1) pour le retourner verticalement.

- -

Code jouable 2

- - - - - -

{{ EmbedLiveSample('code_jouable_2', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateur

- -

{{Compat("api.CanvasRenderingContext2D.scale")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md new file mode 100644 index 0000000000..cb24a37aa0 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.scale() +slug: Web/API/CanvasRenderingContext2D/scale +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/scale +--- +
{{APIRef}}
+ +

La méhode CanvasRenderingContext2D.scale() de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.

+ +

Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.

+ +

Syntaxe

+ +
void ctx.scale(x, y);
+
+ +

Paramètres

+ +
+
x
+
Facteur d'échelle dans la direction horizontale.
+
y
+
Facteur d'échelle dans la direction verticale.
+
+ +

Exemples

+ +

Utilisation de la méthode scale

+ +

Ceci est seulement un fragment de code simple qui utilise la méthode scale.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.scale(10, 3);
+ctx.fillRect(10, 10, 10, 10);
+
+// remet la matrice de transformation courante à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Utilisation de scale pour un retournement horizontal ou vertical

+ +

Vous pouvez utiliser ctx.scale(-1, 1) pour retourner le contexte horizontalement et ctx.scale(1, -1) pour le retourner verticalement.

+ +

Code jouable 2

+ + + + + +

{{ EmbedLiveSample('code_jouable_2', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateur

+ +

{{Compat("api.CanvasRenderingContext2D.scale")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html deleted file mode 100644 index e8cdb0416e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: CanvasRenderingContext2D.setLineDash() -slug: Web/API/CanvasRenderingContext2D/setLineDash -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Lignes - - Modèle - - Méthodes - - Pointillés - - Reference - - patterns - - setLineDash -translation_of: Web/API/CanvasRenderingContext2D/setLineDash ---- -
{{APIRef}}
- -

La méthode setLineDash() de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.

- -
-

Note : Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.

-
- -

Syntaxe

- -
ctx.setLineDash(segments);
-
- -

Paramètres

- -
-
segments
-
Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, [5, 15, 25] est transformé en [5, 15, 25, 5, 15, 25]. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.
-
- -

Valeur de retour

- -

undefined.

- -

Exemples

- -

C'est simplement un fragment de code qui utilise la méthode setLineDash() pour dessiner une ligne pointillée au dessus d'une ligne pleine.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.setLineDash([5, 15]);
-ctx.moveTo(0, 50);
-ctx.lineTo(400, 50);
-ctx.stroke();
-
-ctx.beginPath();
-ctx.setLineDash([]);
-ctx.moveTo(0, 150);
-ctx.lineTo(400, 150);
-ctx.stroke();
-
- -

Essayez le

- -

Editez le code ci-dessous et observez les changements se produire dans le canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 10, 410) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navivgateurs

- -

{{Compat("api.CanvasRenderingContext2D.setLineDash")}}

- -

Notes spécifiques pour Gecko

- - - -

Notes spécifiques pour WebKit

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md new file mode 100644 index 0000000000..e8cdb0416e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -0,0 +1,159 @@ +--- +title: CanvasRenderingContext2D.setLineDash() +slug: Web/API/CanvasRenderingContext2D/setLineDash +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Lignes + - Modèle + - Méthodes + - Pointillés + - Reference + - patterns + - setLineDash +translation_of: Web/API/CanvasRenderingContext2D/setLineDash +--- +
{{APIRef}}
+ +

La méthode setLineDash() de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.

+ +
+

Note : Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.

+
+ +

Syntaxe

+ +
ctx.setLineDash(segments);
+
+ +

Paramètres

+ +
+
segments
+
Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, [5, 15, 25] est transformé en [5, 15, 25, 5, 15, 25]. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.
+
+ +

Valeur de retour

+ +

undefined.

+ +

Exemples

+ +

C'est simplement un fragment de code qui utilise la méthode setLineDash() pour dessiner une ligne pointillée au dessus d'une ligne pleine.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.setLineDash([5, 15]);
+ctx.moveTo(0, 50);
+ctx.lineTo(400, 50);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.setLineDash([]);
+ctx.moveTo(0, 150);
+ctx.lineTo(400, 150);
+ctx.stroke();
+
+ +

Essayez le

+ +

Editez le code ci-dessous et observez les changements se produire dans le canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 10, 410) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navivgateurs

+ +

{{Compat("api.CanvasRenderingContext2D.setLineDash")}}

+ +

Notes spécifiques pour Gecko

+ + + +

Notes spécifiques pour WebKit

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html deleted file mode 100644 index e66241605d..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: CanvasRenderingContext2D.setTransform() -slug: Web/API/CanvasRenderingContext2D/setTransform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/setTransform ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.setTransform() de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.

- -

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..

- -

Syntaxe

- -
void ctx.setTransform(a, b, c, d, e, f);
-
- -

La matrice de transformation est décrite par : [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

- -

Paramètres

- -
-
a (m11)
-
Échelle horizontale.
-
b (m12)
-
Inclinaison horizontale.
-
c (m21)
-
Inclinaison verticale.
-
d (m22)
-
Échelle verticale.
-
e (dx)
-
Déplacement horizontal.
-
f (dy)
-
Déplacement vertical.
-
- -

Exemples

- -

Utilisation de la méthode setTransform

- -

Ceci est seulement un fragment de code simple qui utilise la méthode setTransform.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.setTransform(1, 1, 0, 1, 0, 0);
-ctx.fillRect(0, 0, 100, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.setTransform")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md new file mode 100644 index 0000000000..e66241605d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -0,0 +1,129 @@ +--- +title: CanvasRenderingContext2D.setTransform() +slug: Web/API/CanvasRenderingContext2D/setTransform +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/setTransform +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.setTransform() de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.

+ +

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..

+ +

Syntaxe

+ +
void ctx.setTransform(a, b, c, d, e, f);
+
+ +

La matrice de transformation est décrite par : [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

+ +

Paramètres

+ +
+
a (m11)
+
Échelle horizontale.
+
b (m12)
+
Inclinaison horizontale.
+
c (m21)
+
Inclinaison verticale.
+
d (m22)
+
Échelle verticale.
+
e (dx)
+
Déplacement horizontal.
+
f (dy)
+
Déplacement vertical.
+
+ +

Exemples

+ +

Utilisation de la méthode setTransform

+ +

Ceci est seulement un fragment de code simple qui utilise la méthode setTransform.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.setTransform(1, 1, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 100, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.setTransform")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html deleted file mode 100644 index fd836674ad..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: CanvasRenderingContext2D.stroke() -slug: Web/API/CanvasRenderingContext2D/stroke -translation_of: Web/API/CanvasRenderingContext2D/stroke ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.stroke() de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.

- -

Syntaxe

- -
void ctx.stroke();
-void ctx.stroke(path);
-
- -

Paramètres

- -
-
path
-
Un chemin {{domxref("Path2D")}} à dessiner.
-
- -

Exemples

- -

Utilisation de la méthode stroke

- -

Il s'agit d'un extrait de code simple utilisant la méthode stroke pour tracer un chemin.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-ctx.rect(10, 10, 100, 100);
-ctx.stroke();
-
- -

Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.stroke")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md new file mode 100644 index 0000000000..fd836674ad --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -0,0 +1,108 @@ +--- +title: CanvasRenderingContext2D.stroke() +slug: Web/API/CanvasRenderingContext2D/stroke +translation_of: Web/API/CanvasRenderingContext2D/stroke +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.stroke() de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.

+ +

Syntaxe

+ +
void ctx.stroke();
+void ctx.stroke(path);
+
+ +

Paramètres

+ +
+
path
+
Un chemin {{domxref("Path2D")}} à dessiner.
+
+ +

Exemples

+ +

Utilisation de la méthode stroke

+ +

Il s'agit d'un extrait de code simple utilisant la méthode stroke pour tracer un chemin.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+
+ +

Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.stroke")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html deleted file mode 100644 index 14620b3c66..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: CanvasRenderingContext2D.strokeRect() -slug: Web/API/CanvasRenderingContext2D/strokeRect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) -translation_of: Web/API/CanvasRenderingContext2D/strokeRect ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.strokeRect() de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche (x, y) et aux dimensions déterminées par largeur et hauteur dans la balise canvas, et en utilisant l'actuel strokeStyle.

- -

Syntaxe

- -
void ctx.strokeRect(x, y, largeur, hauteur);
-
- -

Paramètres

- -
-
x
-
L'abcisse x des coordonnées du point de départ du rectangle.
-
y
-
L'ordonnée y des coordonnées du point de départ du rectangle.
-
largeur
-
La largeur du rectangle.
-
hauteur
-
La hauteur de rectangle.
-
- -

Exemples

- -

Utilisation de la méthode strokeRect

- -

Ceci est juste un extrait de code qui utilise la méthode strokeRect.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-ctx.strokeStyle = "green";
-ctx.strokeRect(10, 10, 100, 100);
-
- -

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.strokeRect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md new file mode 100644 index 0000000000..14620b3c66 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -0,0 +1,123 @@ +--- +title: CanvasRenderingContext2D.strokeRect() +slug: Web/API/CanvasRenderingContext2D/strokeRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/strokeRect +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.strokeRect() de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche (x, y) et aux dimensions déterminées par largeur et hauteur dans la balise canvas, et en utilisant l'actuel strokeStyle.

+ +

Syntaxe

+ +
void ctx.strokeRect(x, y, largeur, hauteur);
+
+ +

Paramètres

+ +
+
x
+
L'abcisse x des coordonnées du point de départ du rectangle.
+
y
+
L'ordonnée y des coordonnées du point de départ du rectangle.
+
largeur
+
La largeur du rectangle.
+
hauteur
+
La hauteur de rectangle.
+
+ +

Exemples

+ +

Utilisation de la méthode strokeRect

+ +

Ceci est juste un extrait de code qui utilise la méthode strokeRect.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.strokeRect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html deleted file mode 100644 index fa703e43d0..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: CanvasRenderingContext2D.strokeStyle -slug: Web/API/CanvasRenderingContext2D/strokeStyle -translation_of: Web/API/CanvasRenderingContext2D/strokeStyle ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.strokeStyle de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est #000 (black).

- -

Voir également le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.strokeStyle = color;
-ctx.strokeStyle = gradient;
-ctx.strokeStyle = pattern;
-
- -

Options

- -
-
color
-
Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.
-
gradient
-
Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
-
pattern
-
Un objet {{domxref("CanvasPattern")}} (une image répétée).
-
- -

Exemples

- -

Utiliser la propriété strokeStyle pour définir une couleur différente

- -

Ceci est un simple snippet de code utilisant la propriété strokeStyle pour définir une couleur différente.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.strokeStyle = 'blue';
-ctx.strokeRect(10, 10, 100, 100);
-
- -

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Un exemple strokeStyle

- -

Cet exemple utilise la propriété strokeStyle pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.

- -
var ctx = document.getElementById('canvas').getContext('2d');
-
-for (var i = 0; i < 6; i++) {
-  for (var j = 0; j < 6; j++) {
-    ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
-                      Math.floor(255 - 42.5 * j) + ')';
-    ctx.beginPath();
-    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
-    ctx.stroke();
-  }
-}
-
- - - -

Le résultat devrait ressembler à ça:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- -

{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}

- - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md new file mode 100644 index 0000000000..fa703e43d0 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -0,0 +1,154 @@ +--- +title: CanvasRenderingContext2D.strokeStyle +slug: Web/API/CanvasRenderingContext2D/strokeStyle +translation_of: Web/API/CanvasRenderingContext2D/strokeStyle +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.strokeStyle de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est #000 (black).

+ +

Voir également le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.strokeStyle = color;
+ctx.strokeStyle = gradient;
+ctx.strokeStyle = pattern;
+
+ +

Options

+ +
+
color
+
Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.
+
gradient
+
Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
+
pattern
+
Un objet {{domxref("CanvasPattern")}} (une image répétée).
+
+ +

Exemples

+ +

Utiliser la propriété strokeStyle pour définir une couleur différente

+ +

Ceci est un simple snippet de code utilisant la propriété strokeStyle pour définir une couleur différente.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = 'blue';
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Un exemple strokeStyle

+ +

Cet exemple utilise la propriété strokeStyle pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.

+ +
var ctx = document.getElementById('canvas').getContext('2d');
+
+for (var i = 0; i < 6; i++) {
+  for (var j = 0; j < 6; j++) {
+    ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
+                      Math.floor(255 - 42.5 * j) + ')';
+    ctx.beginPath();
+    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+    ctx.stroke();
+  }
+}
+
+ + + +

Le résultat devrait ressembler à ça:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}

+ + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html deleted file mode 100644 index c1b20a2580..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: CanvasRenderingContext2D.strokeText() -slug: Web/API/CanvasRenderingContext2D/strokeText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/strokeText ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.strokeText() de l'API Canvas 2D trace le texte fourni à la position donnée (x, y). Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.

- -

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.

- -

Syntaxe

- -
void ctx.strokeText(texte, x, y [, largeurMax]);
-
- -

Paramètres

- -
-
texte
-
Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.
-
- -
-
x
-
La coordonnée sur l'axe des x du point de départ du texte.
-
y
-
La coordonnée sur l'axe des y du point de départ du texte.
-
largeurMax {{optional_inline}}
-
La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.
-
- -

Exemples

- -

Utilisation de la méthode strokeText

- -

Il ne s'agit que d'un extrait de code simple qui utilise la méthode strokeText.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.strokeText('Hello world', 50, 100);
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.strokeText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md new file mode 100644 index 0000000000..c1b20a2580 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -0,0 +1,126 @@ +--- +title: CanvasRenderingContext2D.strokeText() +slug: Web/API/CanvasRenderingContext2D/strokeText +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/strokeText +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.strokeText() de l'API Canvas 2D trace le texte fourni à la position donnée (x, y). Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.

+ +

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.

+ +

Syntaxe

+ +
void ctx.strokeText(texte, x, y [, largeurMax]);
+
+ +

Paramètres

+ +
+
texte
+
Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.
+
+ +
+
x
+
La coordonnée sur l'axe des x du point de départ du texte.
+
y
+
La coordonnée sur l'axe des y du point de départ du texte.
+
largeurMax {{optional_inline}}
+
La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.
+
+ +

Exemples

+ +

Utilisation de la méthode strokeText

+ +

Il ne s'agit que d'un extrait de code simple qui utilise la méthode strokeText.

+ +

HTML

+ +
<canvas id="canevas"></canvas>
+
+ +

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.strokeText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html deleted file mode 100644 index ba3b152f70..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: CanvasRenderingContext2D.textAlign -slug: Web/API/CanvasRenderingContext2D/textAlign -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/textAlign ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.textAlign de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.fillText. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.

- -

Syntaxe

- -
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
-
- -

Options

- -

Valeurs possibles :

- -
-
left
-
Le texte est aligné à gauche.
-
right
-
Le texte est aligné à droite.
-
center
-
Le texte est centré.
-
start
-
Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).
-
end
-
Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).
-
- -

La valeur pa défaut est start.

- -

Exemples

- -

Utilisation de la propriété textAlign

- -

Ceci est seulement un fragment de code simple utilisant la propriété textAlign pour indiquer un alignement de texte.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.textAlign = 'left';
-ctx.strokeText('Hello world', 0, 100);
-
- -

Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Playable code

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.textAlign")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md new file mode 100644 index 0000000000..ba3b152f70 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.textAlign de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.fillText. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.

+ +

Syntaxe

+ +
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
+
+ +

Options

+ +

Valeurs possibles :

+ +
+
left
+
Le texte est aligné à gauche.
+
right
+
Le texte est aligné à droite.
+
center
+
Le texte est centré.
+
start
+
Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).
+
end
+
Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).
+
+ +

La valeur pa défaut est start.

+ +

Exemples

+ +

Utilisation de la propriété textAlign

+ +

Ceci est seulement un fragment de code simple utilisant la propriété textAlign pour indiquer un alignement de texte.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Playable code

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.textAlign")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html deleted file mode 100644 index c2dadee8db..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: CanvasRenderingContext2D.textBaseline -slug: Web/API/CanvasRenderingContext2D/textBaseline -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/textBaseline ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.textBaseline de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.

- -

Syntaxe

- -
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
-
- -

Options

- -

Valeurs possibles :

- -
-
top
-
La ligne de base du texte est le haut du cadratin.
-
hanging
-
La ligne de base du texte est la ligne de base supérieure.
-
middle
-
La ligne de base du texte est le milieu du cadratin.
-
alphabetic
-
La ligne de base du texte est la ligne de base normale alphabétique.
-
ideographic
-
La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.
-
bottom
-
La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.
-
- -

La valeur par défaut est alphabetic.

- -

Exemples

- -

Utilisation de la propritété textBaseline

- -

Ceci est seulement un fragment de code simple utilisant la propriété textBaseline pour définir un réglage différent de ligne de base de texte.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.textBaseline")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md new file mode 100644 index 0000000000..c2dadee8db --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -0,0 +1,130 @@ +--- +title: CanvasRenderingContext2D.textBaseline +slug: Web/API/CanvasRenderingContext2D/textBaseline +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/textBaseline +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.textBaseline de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.

+ +

Syntaxe

+ +
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
+
+ +

Options

+ +

Valeurs possibles :

+ +
+
top
+
La ligne de base du texte est le haut du cadratin.
+
hanging
+
La ligne de base du texte est la ligne de base supérieure.
+
middle
+
La ligne de base du texte est le milieu du cadratin.
+
alphabetic
+
La ligne de base du texte est la ligne de base normale alphabétique.
+
ideographic
+
La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.
+
bottom
+
La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.
+
+ +

La valeur par défaut est alphabetic.

+ +

Exemples

+ +

Utilisation de la propritété textBaseline

+ +

Ceci est seulement un fragment de code simple utilisant la propriété textBaseline pour définir un réglage différent de ligne de base de texte.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.textBaseline")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html deleted file mode 100644 index c80bc02507..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: CanvasRenderingContext2D.transform() -slug: Web/API/CanvasRenderingContext2D/transform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/transform ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.transform () de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.

- -

Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque transform().

- -

Syntaxe

- -
void ctx.transform(a, b, c, d, e, f);
-
- -

La matrice de transformation est décrite par : [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

- -

Paramètres

- -
-
a (m11)
-
Échelle horizontale.
-
b (m12)
-
Inclinaison horizontale.
-
c (m21)
-
Inclinaison verticale.
-
d (m22)
-
Échelle verticale.
-
e (dx)
-
Déplacement horizontal.
-
f (dy)
-
Déplacement vertical.
-
- -

Exemples

- -

Utilisation de la méthode transform

- -

Ceci est seulement un fragment de code simple utilisant la méthode transform.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.transform(1, 1, 0, 1, 0, 0);
-ctx.fillRect(0, 0, 100, 100);
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.transform")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md new file mode 100644 index 0000000000..c80bc02507 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -0,0 +1,132 @@ +--- +title: CanvasRenderingContext2D.transform() +slug: Web/API/CanvasRenderingContext2D/transform +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/transform +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.transform () de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.

+ +

Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque transform().

+ +

Syntaxe

+ +
void ctx.transform(a, b, c, d, e, f);
+
+ +

La matrice de transformation est décrite par : [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

+ +

Paramètres

+ +
+
a (m11)
+
Échelle horizontale.
+
b (m12)
+
Inclinaison horizontale.
+
c (m21)
+
Inclinaison verticale.
+
d (m22)
+
Échelle verticale.
+
e (dx)
+
Déplacement horizontal.
+
f (dy)
+
Déplacement vertical.
+
+ +

Exemples

+ +

Utilisation de la méthode transform

+ +

Ceci est seulement un fragment de code simple utilisant la méthode transform.

+ +

HTML

+ +
<canvas id="canevas"></canvas>
+
+ +

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.transform(1, 1, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 100, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.transform")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html deleted file mode 100644 index 9b82274d6d..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CanvasRenderingContext2D.translate() -slug: Web/API/CanvasRenderingContext2D/translate -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/translate ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.translate() de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.

- -

Syntaxe

- -
void ctx.translate(x, y);
-
- -

- -

Paramètres

- -
-
x
-
Distance de déplacement dans le sens horizontal.
-
y
-
Distance de déplacement dans le sens vertical.
-
- -

Exemples

- -

Utilisation de la méthode translate

- -

Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.translate(50, 50);
-ctx.fillRect(0, 0, 100, 100);
-
-// Réinitialise la matrice de transformation en cours à la matrice identité
-ctx.setTransform(1, 0, 0, 1, 0, 0);
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.translate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md new file mode 100644 index 0000000000..9b82274d6d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -0,0 +1,122 @@ +--- +title: CanvasRenderingContext2D.translate() +slug: Web/API/CanvasRenderingContext2D/translate +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/translate +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.translate() de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.

+ +

Syntaxe

+ +
void ctx.translate(x, y);
+
+ +

+ +

Paramètres

+ +
+
x
+
Distance de déplacement dans le sens horizontal.
+
y
+
Distance de déplacement dans le sens vertical.
+
+ +

Exemples

+ +

Utilisation de la méthode translate

+ +

Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.

+ +

HTML

+ +
<canvas id="canevas"></canvas>
+
+ +

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.translate(50, 50);
+ctx.fillRect(0, 0, 100, 100);
+
+// Réinitialise la matrice de transformation en cours à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.translate")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf