Méthode scale() de canvas HTML
Définition et utilisation
scale() Méthode pour zoomer sur le dessin actuel, plus grand ou plus petit.
Remarque :Si vous effectuez un zoom sur le dessin, tous les dessins suivants seront également zoomés. La position sera également zoomée. Si vous écrivez scale(2,2)Alors, le dessin sera positionné à deux fois la distance de l'angle supérieur gauche du canevas.
Exemple
Exemple 1
Dessiner un rectangle, l'agrandir de 200%, puis dessiner à 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 sont disponibles en bas de la page.
Syntaxe
context.scale(scalewidth,scaleheight);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| scalewidth | Ajuster la largeur actuelle du dessin (1=100%, 0.5=50%, 2=200%, etc.). |
| scaleheight | Ajuster la hauteur actuelle du dessin (1=100%, 0.5=50%, 2=200%, etc.). |
Plus d'exemples
Exemple 2
Dessiner un rectangle ; agrandir à 200% et dessiner à nouveau un rectangle ; agrandir à 200% et dessiner à nouveau un rectangle ; agrandir à 200% et dessiner à 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);
Prise en charge 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>.
