From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- .../canvasrenderingcontext2d/clearrect/index.md | 128 ++++++++++----------- 1 file changed, 58 insertions(+), 70 deletions(-) (limited to 'files/fr/web/api/canvasrenderingcontext2d/clearrect') diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index 7bf854557e..f11c76ec20 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -9,46 +9,45 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/clearRect --- -
{{APIRef}}
+{{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é.

+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

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

Paramètres

+### 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.
-
+- `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

+## 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.

+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](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. -

Exemples

+## Exemples -

Utilisation de la méthode clearRect

+### Utilisation de la méthode `clearRect` -

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

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

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canevas = document.getElementById("canvas");
+```js
+var canevas = document.getElementById("canvas");
 var ctx = canevas.getContext("2d");
 
 ctx.beginPath();
@@ -62,18 +61,19 @@ 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 :

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

Code jouable

+#### Code jouable -