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 --- .../imagesmoothingenabled/index.html | 99 ---------------------- .../imagesmoothingenabled/index.md | 99 ++++++++++++++++++++++ 2 files changed, 99 insertions(+), 99 deletions(-) delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md (limited to 'files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled') 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

+ + -- cgit v1.2.3-54-g00ecf