Manuale di riferimento HTML

Completo elenco HTML

Metodo scale() di HTML canvas

scale() è un metodo dell'API Canvas 2D che aggiunge una trasformazione di zoom alle unità del canvas in base alle direzioni x orizzontale e y verticale. Di default, in canvas un'unità è effettivamente un pixel. Ad esempio, se impostiamo 0.5 come fattore di zoom, l'unità finale sarà di 0.5 pixel e la dimensione della forma sarà metà di quella originale. In modo simile, se impostiamo 2.0 come fattore di zoom, l'unità di dimensione sarà aumentata a due pixel. La dimensione della forma sarà raddoppiata.

Manuale di riferimento per HTML canvas

Esempio online

Disegna un rettangolo, ingrandisci al 200%, poi disegna di nuovo un rettangolo:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo scale() per HTML canvas - Corso di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta l'etichetta HTML5 canvas.
</canvas>
<script>
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);
</script>　
</body>
</html>

Prova a vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano scale() Metodo.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Il metodo scale() zooma il disegno corrente fino a più grande o più piccolo.

Attenzione:Se zoomi sul disegno, tutti i disegni successivi saranno zoomati. Anche la posizione sarà zoomata. Se zoomi di 2,2, il disegno sarà posizionato a due volte la distanza dall'angolo in alto a sinistra della lavagna.

Sintassi JavaScript:	context.scale(scalewidth,scaleheight);

Valore del parametro

Parametro	Descrizione
scalewidth	Zooma sulla larghezza corrente del disegno (1=100%, 0.5=50%, 2=200%, ecc.).
scaleheight	Zooma sull'altezza corrente del disegno (1=100%, 0.5=50%, 2=200%, ecc.).

Esempio online

Disegna un rettangolo; ingrandisci al 200%, disegna di nuovo un rettangolo; ingrandisci al 200%, disegna di nuovo un rettangolo; ingrandisci al 200%, disegna di nuovo un rettangolo:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo scale() per HTML canvas - Corso di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta l'etichetta HTML5 canvas.
</canvas>
<script>
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);
</script>
</body>
</html>

Prova a vedere ‹/›

Manuale di riferimento per HTML canvas

HTML: <template> etichetta