HTML5 Effacer le canevas

HTML5 Utilisation de clearRect() sur Canvas2La fonction clearRect() du contexte D est utilisée pour effacer un rectangle sur le canevas. Le rectangle effacé devient transparent.

Exemple en ligne

2La fonction clearRect() du contexte D est utilisée pour effacer un rectangle sur le canevas. Le rectangle effacé devient transparent. Voici un exemple de code :

<canvas id="ex1" width="500" height="150" style="border:　1px solide #cccccc;">　　　　
HTML5　Canvas non pris en charge　　　　
/canvas>　　　　
<script>　　　　
var canvas = document.getElementById("ex1");　　　　
var context = canvas.getContext("2d");　　　　
context.fillStyle = "#ff0000";　　　　
context.fillRect(10,10,　100,100);　　　　
context.strokeStyle = "#0000ff";　　　　
context.strokeRect(30,20,　120,　110);　　　　
context.clearRect(50,　30,　110,　35);　　　　　　　　　
/<

Canvas non pris en charge
Veuillez noter comment effacer le rectangle rouge et bleu maintenant.

Comme mentionné précédemment, l'utilisation de clearRect() rend la zone effacée transparente. Si l'élément canvas est placé au-dessus d'un autre élément, le contenu de cet élément sera visible à travers la zone effacée.

Comme pour le dessin d'un rectangle, passez à clearRect(x, y, width, height)4Les paramètres de clearRect() représentent le coin supérieur gauche du rectangle à effacer, ainsi que la largeur et la hauteur du rectangle à effacer.
Voici un exemple plus clair :

var x =　50;
var y =　30;
var width =　110;
var height =　25;
context.clearRect(x, y, width, height);