Méthode HTML canvas scale()
Exemple
Dessinez un rectangle, redimensionnez-le à 200 %, puis dessinez à nouveau un rectangle :
JavaScript :
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| scale() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
La méthode scale() redimensionne le dessin courant, plus grand ou plus petit.
Remarque : Si vous mettez un dessin à l'échelle, tous les futurs dessins seront également mis à l'échelle. Le positionnement sera également mis à l'échelle. Si vous mettez à l'échelle (2,2); les dessins seront positionnés deux fois plus loin de la gauche et du haut du canevas que vous le spécifiez.
| Syntaxe JavaScript : | contexte .scale( scalewidth, scaleheight ); |
|---|
Valeurs des paramètres
| Parameter | Description | Play it |
|---|---|---|
| scalewidth | Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) | |
| scaleheight | Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) |
Plus d'exemples
Exemple
Dessinez un rectangle, redimensionnez à 200 %, redessinez un rectangle, redimensionnez à 200 %, redessinez un rectangle, redimensionnez à 200 %, redessinez un rectangle :
JavaScript :
var c = document.getElementById("myCanvas");
var ctx = c.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);
❮ Objet de toile