Latest web development tutorials

Metodo scala canvas HTML ()

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento

Esempi

Disegnare un rettangolo, zoom al 200%, e quindi disegnare un rettangolo di nuovo:

YourbrowserdoesnotsupporttheHTML5canvastag.

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);

Prova »

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer metodo 9, Firefox, Opera, Chrome e Safari scala supporto ().

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


Definizione e utilizzo

Metodo di scala () per ingrandire il disegno corrente in un grande o più piccolo.

NOTA: Se si ingrandisce il disegno, il disegno sarà ridimensionata dopo tutto.Posizionamento verrà ridimensionata. Se si scala (2,2), allora il disegno sarà situato nell'angolo in alto a sinistra della tela due volte più lontano dalla posizione.

sintassi JavaScript: contesto .scale (ScaleWidth, ScaleHeight);

Valore parametro

参数 描述
scalewidth 缩放当前绘图的宽度(1=100%,0.5=50%,2=200%,依次类推)。
scaleheight 缩放当前绘图的高度(1=100%,0.5=50%,2=200%,依次类推)。


Esempi

Altri esempi

Esempi

Disegnare un rettangolo, lo zoom al 200%, di nuovo disegnando un rettangolo, lo zoom al 200%, di nuovo disegnando un rettangolo, lo zoom al 200%, ancora una volta, disegnando un rettangolo:

YourbrowserdoesnotsupporttheHTMLcanvastag.

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);

Prova »


HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento