Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.
Cette traduction est en cours.
La méthode CanvasRenderingContext2D
.clearRect()
de l'API 2D des Canvas met tout les pixels dans le rectangle défini par le point de départ aux coordonnées (x, y) et de dimensions déterminées pas (largeur, hauteur) en noir transparent, supprimant tout dessin précédemment construit sur cette zone.
Syntaxe
void ctx.clearRect(x, y, largeur, hauteur);
Paramètres
x
- L'ordonnée x des coordonnées du point de départ du rectangle.
y
- L'abcisse y des coordonnées du point de départ du rectangle.
largeur
- La largeur du rectangle.
hauteur
- La hauteur de rectangle.
Usage notes
Un problème récurrent avec clearRect
est qu'il ne fonctionne pas si on n'utilise pas les méthodes de dessin. N'oubliez pas d'appeler beginPath()
avant de débuter un dessin après avoir appellé clearRect
.
Exemples
Utilisation de la méthode clearRect
Ceci est juste un extrait de code qui utilise la méthode clearRect
.
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(); // draws last line of the triangle ctx.stroke(); ctx.clearRect(10, 10, 100, 100); // nettoyer la canvas entièrement : // ctx.clearRect(0, 0, canvas.width, canvas.height);
Éditez le code suivant pour voir les changements en direct dans la balise canvas:
Spécifications
Spécification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard La définition de 'CanvasRenderingContext2D.clearRect' dans cette spécification. |
Standard évolutif |
Compatibilité des navigateurs
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
Feature | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
Voir aussi
- L'interface qui la définit,
CanvasRenderingContext2D
CanvasRenderingContext2D.fillRect()
CanvasRenderingContext2D.strokeRect()