Méthode rect()
Exemple
Dessinez un rectangle de 150 x 100 pixels :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke(); Description
La méthode rect() ajoute un rectangle au chemin.
Voir aussi :
La méthode beginPath() (Pour commencer le chemin)
La méthode stroke() (Pour dessiner le chemin)
La méthode fill() (Pour remplir et dessiner le rectangle)
La méthode fillRect() (Dessiner un rectangle rempli)
Syntaxe
| context .rect( x, y, width, height ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| x | La coordonnée x du coin supérieur gauche du rectangle | |
| y | La coordonnée y du coin supérieur gauche du rectangle | |
| width | La largeur du rectangle, en pixels | |
| height | La hauteur du rectangle, en pixels |
Valeur de retour
| AUCUN |
Plus d'exemples
Exemple
Créez trois rectangles avec la méthode rect() :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Rectangle rouge
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// Rectangle vert
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// Rectangle bleu
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke(); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
rect() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |