Metodo scale() del canvas HTML
Definizione e uso
scale() Il metodo zooma il disegno corrente, più grande o più piccolo.
Nota:Se zoomi il disegno, tutti i disegni successivi saranno zoomati. Anche la posizione sarà zoomata. Se scrivi scale(2,2), allora il disegno sarà posizionato a due volte la distanza dall'angolo in alto a sinistra del canvas.
Esempio
Esempio 1
Disegna un rettangolo, ingrandiscilo al 200% e disegna nuovamente un rettangolo:
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);
Suggerimento:Più esempi sono disponibili nella parte inferiore della pagina.
Sintassi
context.scale(scalewidth,scaleheight);
Valore del parametro
| Parametro | Descrizione |
|---|---|
| scalewidth | Zooma la larghezza corrente del disegno (1=100%, 0.5=50%, 2=200%, ecc.). |
| scaleheight | Zooma l'altezza corrente del disegno (1=100%, 0.5=50%, 2=200%, ecc.). |
Più esempi
Esempio 2
Disegna un rettangolo; ingrandisci al 200%, disegna di nuovo il rettangolo; ingrandisci al 200%, poi disegna di nuovo il rettangolo; ingrandisci al 200%, disegna di nuovo il rettangolo:
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);
Supporto del browser
I numeri nella tabella indicano la versione del browser che ha supportato per la prima volta questa proprietà.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
