Canvas : la fonction clearRect()

Thème : dessiner le drapeau de la Suisse.

Nous abordons dans cette page la fonction native clearRect(x,y,largeur,hauteur) qui permet d'effacer (remplir par du blanc) une partie de la zone de dessin.

Le code la page (extraits)

... <canvas width = '400' height = '400'></canvas> ... <script> var canvas = document.querySelector('canvas'); var contexte = canvas.getContext('2d'); contexte.fillStyle = 'red'; contexte.fillRect(100,100,200,200) ; contexte.clearRect(130,180,140,40); contexte.clearRect(180,130,40,140); </script> </body></html>

Commentaire du code

HTML : La zone de dessin Canvas fait 400 pixels par 400.

Le script :
Il faut d'abord créer un carré (200 pixels de côté) avec un fond rouge et centré dans la zone de dessin.
Puis il faut effacer une partie du rouge avec deux rectangles d'effacement : méthode clearRect(x,y,largeur, hauteur)

Mais comment déterminer les coordonnées de l'arête supérieure gauche de chaque rectangle d'effacement ?

Si vous voulez être productif (coder vite et bien) je vous conseille de faire un croquis (sur une feuille de papier millimétrée ou une feuille à petit carreaux) avant de coder proprement dit. Vous éviterez maints tatônnements ...

Faire un croquis avant de coder

La zone de dessin fait 400 par 400. Si vous utilisez une feuille avec des petits carreaux (de 5mm par 5mm) décidez alors d'une échelle. Je vous propose qu'un carreau représente 10px par 10px. Donc un 1/2 cm = 10px ou 1cm = 20px. Vous avez donc une échelle 1/20 (1cm pour 20px).
C'est l'échelle que j'ai utilisé dans le croquis ci-dessous.
La boîte Canvas (400px par 400px) fait donc dans notre croquis 40 carreaux (20cm) de côté.
Ensuite vous dessinez le carré rouge (200px ou 10cm de côté) et les rectangles d'effacement. Le graphique vous indique directement les valeurs x et y du carré et de chaque rectangle. Quant à la détermination des "width" et "height" en pixels, il suffit de multiplier par 20 la cote en centimètres donnée par le croquis ... canvas croquis

Un deuxième exemple plus complexe

Nous allons maintenant dessiner le drapeau norvégien !

Je ne vous donne pas tout le code. Mais je vous aide !
Le canevas fait 600 par 400.

Ci-dessous un extrait du code :

... <canvas width = '600' height = '400' id ="canevas"></canvas> <script> var canevas = document.querySelector("#canevas"); var contexte = canevas.getContext('2d'); var X = canevas.width; var Y = canevas.height; // fond rouge contexte.fillStyle = "red" ; contexte.fillRect(0,0,X,Y); ...

Je récupère dans les variables X et Y respectivement la largeur et la hauteur du canevas.
Je peux utiliser ces valeurs pour paramétrer les fonctions fillRect(), clearRect(), etc.
Retour menu