Dessin de rectangles via canvas en JavaScript
Il n'est pas nécessaire de dessiner des carrés et des rectangles
en utilisant des combinaisons de moveTo,
lineTo - il existe des méthodes plus simples.
Voyons cela.
Méthode strokeRect
La méthode strokeRect(x, y, largeur,
hauteur) dessine le contour d'un rectangle
au point spécifié. Les deux premiers paramètres définissent
les coordonnées du point où se trouvera le coin supérieur
gauche du rectangle dessiné.
Dessinons un rectangle à l'aide de
strokeRect (supposons que ctx
existe déjà) :
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Méthode fillRect
La méthode fillRect(x, y, largeur, hauteur)
fonctionne de la même manière que strokeRect,
mais dessine un rectangle rempli.
Regardons un exemple :
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Méthode rect
La méthode suivante rect(x, y, largeur,
hauteur) dessine également un rectangle. Mais
ce rectangle ne devient visible que si
on applique la méthode stroke ou fill.
Dans le premier cas, ce sera le contour, et dans le second
- la forme remplie.
Dessinons un contour à l'aide de rect :
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
Et maintenant, dessinons une forme remplie :
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Méthode clearRect
La méthode suivante clearRect(x, y,
largeur, hauteur) fonctionne comme une gomme,
effaçant une zone rectangulaire et rendant
son contenu complètement transparent.
Dessinons un petit carré avec fillRect
et effaçons une partie avec clearRect :
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
