Metodo scale() del canvas
Definizione e uso
scale() Metodo per zoomare il disegno attuale, 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)Quindi il disegno sarà posizionato a due volte la distanza dall'angolo sinistro superiore del canvas.
Esempio
Esempio 1
Disegna un rettangolo, ingrandisci al 200%, poi 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);
Suggerimento:Più esempi disponibili nella parte inferiore della pagina.
Sintassi
context.scale(scalewidth,scaleheight);
Valore del parametro
| Parametro | Descrizione |
|---|---|
| scalewidth | Scala la larghezza attuale del disegno (1=100%, 0.5=50%, 2=200%, ecc.). |
| scaleheight | Scala l'altezza attuale 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 browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| 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>.
