Méthode de scale() pour canvas
Définition et utilisation
scale() Méthode pour agrandir ou rétrécir le dessin actuel.
Remarque :Si vous agrandissez le dessin, tous les dessins suivants seront également agrandis. La position也会被缩放。如果您写 scale(2,2)Alors, le dessin sera positionné à deux fois plus loin du coin supérieur gauche du canevas.
Exemple
Exemple 1
Tracez un rectangle, agrandissez de 200%, puis tracez à 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);
Astuce :Plus d'exemples en bas de la page.
Syntaxe
context.scale(scalewidth,scaleheight);
Valeur des paramètres
| Paramètres | Description |
|---|---|
| scalewidth | Agrandissez la largeur actuelle du dessin (1=100%, 0,5=50%, 2=200%, etc.). |
| scaleheight | Agrandissez la hauteur actuelle du dessin (1=100%, 0,5=50%, 2=200%, etc.). |
Plus d'exemples
Exemple 2
Tracez un rectangle ; agrandissez de 200%, puis tracez à nouveau un rectangle ; agrandissez de 200%, puis tracez à nouveau un rectangle ; agrandissez de 200%, puis tracez à 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);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Support du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Les versions 8 et antérieures d'Internet Explorer ne prennent pas en charge l'élément <canvas>.
