HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas scale() Methode

scale() ist Canvas 2D API bietet Methoden zur hinzufügung von Skalierungstransformationsmethoden für canvas-Einheiten, basierend auf den horizontalen x- und vertikalen y-Koordinaten. Standardmäßig ist ein Einheit in canvas tatsächlich ein Pixel. Zum Beispiel, wenn wir 0.5als Skalierungsfaktor verwenden, und der endgültige Einheitenwert wird auf 0.5Pixel, und die Größe der Form wird auf die Hälfte verringert. Auf ähnliche Weise werden wir2.0 als Skalierungsfaktor wird die Einheitengröße auf zwei Pixel vergrößern. Die Größe der Form wird auf das Doppelte erhöht.

HTML canvas Reference Manual

Online-Beispiel

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

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas scale() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas Tag.
</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>

Test see ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

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

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

Definition und Verwendung

Die Methode scale() vergrößert die aktuelle Zeichnung auf eine größere oder kleinere Größe.

Hinweis:Wenn Sie die Zeichnung vergrößern, wird alle nachfolgenden Zeichnungen ebenfalls vergrößert. Die Position wird ebenfalls vergrößert. Wenn Sie scale(2,2), dann wird die Zeichnung in einer Position定位, die doppelt so weit von der linken oberen Ecke des Canvas entfernt ist.

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

Parameterwert

Parameter	Beschreibung
scalewidth	Vergrößern Sie die aktuelle Zeichnungsbreite (1=100%,0.5=50%,2=200%, und so weiter).
scaleheight	Vergrößern Sie die aktuelle Zeichnungshöhe (1=100%,0.5=50%,2=200%, und so weiter).

Online-Beispiel

zeichnen Sie ein Rechteck; vergrößern auf 200%, zeichnen Sie erneut ein Rechteck; vergrößern auf 200%, zeichnen Sie erneut ein Rechteck; vergrößern auf 200%, zeichnen Sie erneut ein Rechteck:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas scale() method usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas Tag.
</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>

Test see ‹/›

HTML canvas Reference Manual

HTML: <template> Tag