Latest web development tutorials

HTML-Leinwand-Skala () -Methode

Canvas Object Reference Canvas - Objekt

Beispiele

Zeichnen Sie ein Rechteck, Vergrößern auf 200%, und dann ziehen Sie ein Rechteck wieder:

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

Versuchen »

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen Skala () -Methode.

Hinweis: 8 und frühere Versionen von Internet Explorer unterstützt nicht das <canvas> -Element.


Definition und Verwendung

Skala () Methode, um die aktuelle Zeichnung zu einem größeren oder kleineren zu vergrößern.

HINWEIS: Wenn Sie auf der Zeichnung zoomen, wird die Zeichnung nach allen skaliert werden.Positionierung wird skaliert. Wenn man (2,2) skaliert, dann wird die Zeichnung in der oberen linken Ecke der Leinwand doppelt so weit von dem Ort entfernt werden.

JavaScript-Syntax: Kontext .scale (Scalewidth, Scaleheight);

Parameter Wert

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


Beispiele

Weitere Beispiele

Beispiele

Zeichnen Sie ein Rechteck, Zoom auf 200% wieder ein Rechteck zeichnen, vergrößern zu 200% wieder ein Rechteck zeichnen, vergrößern zu 200% erneut ein Rechteck zeichnen:

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

Versuchen »


Canvas Object Reference Canvas - Objekt