Méthode scale()
Exemple
Dessinez un rectangle, mettez-le à l'échelle à 200 %, puis dessinez à nouveau le rectangle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15); Plus d'exemples ci-dessous.
Description
La méthode scale() met à l'échelle le contexte actuel.
Remarque
Si vous mettez à l'échelle un contexte, tous les dessins futurs seront également mis à l'échelle. Si vous utilisez scale(2,2), les dessins seront positionnés deux fois plus loin de la position 0,0 du canvas que ce que vous spécifiez.
Voir aussi :
La méthode rotate() (Faire pivoter le contexte)
La méthode translate() (Remapper la position 0,0)
La méthode transform() (Mettre à l'échelle, faire pivoter, déplacer, incliner le contexte)
La méthode setTransform() (Mettre à l'échelle, faire pivoter, déplacer, incliner le contexte).
Syntaxe
| context .scale( scalewidth, scaleheight ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| scalewidth | Met à l'échelle la largeur (1=100 %, 0.5=50 %, 2=200 %) | |
| scaleheight | Met à l'échelle la hauteur (1=100 %, 0.5=50 %, 2=200 %) |
Valeur de retour
| AUCUN |
Plus d'exemples
Exemple
Dessinez un rectangle, mettez-le à l'échelle à 200 %, dessinez à nouveau le rectangle, mettez-le à l'échelle à 200 %, dessinez à nouveau le rectangle, mettez-le à l'échelle à 200 %, dessinez à nouveau le rectangle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
scale() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |