CanvasRenderingContext2D.scale()
Die Methode CanvasRenderingContext2D
.scale()
der Canvas 2D API skaliert das Canvas-Element um den Faktor x horizontal und um den Faktor y vertikal.
Normalerweise ist eine Einheit auf dem Canvas genau ein Pixel. Wenn wir zum Beispiel einen Skalierungsfaktor von 0,5 Pixeln anwenden, ist eine Einheit 0,5 Pixel und alle Objekte werden mit der halben Größe gezeichnet. Analog dazu vergößert der Skalierungsfaktor 2,0 die Längeneinheit auf zwei Pixel. Die Objekte werden dann doppelt so groß gezeichnet.
Syntax
void ctx.scale(x, y);
Parameter
x
- Skalierungsfaktor in horizontaler Richtung.
y
- Skalierungsfaktor in vertikaler Richtung
Beispiele
Die Methode scale
verwenden
Dies ist nur ein kurzes Beispiel, das die Methode scale
benutzt.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.scale(10, 3);
ctx.fillRect(10, 10, 10, 10);
// reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);
Editieren Sie den folgenden Code und sehen Sie die Änderungen sofort im Canvas:
scale
verwenden, um horizontal oder vertikal zu spiegeln
Sie können ctx.scale(-1, 1)
benutzen, um den Inhalt horizontal zu spiegeln und ctx.scale(1, -1)
, um ihn vertikal zu spiegeln.
Spezifikationen
Specification | Status | Comment |
---|---|---|
HTML Living Standard Die Definition von 'CanvasRenderingContext2D.scale' in dieser Spezifikation. |
Lebender Standard |
Browserkompabilität
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Grundlegende Unterstützung | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Grundlegende Unterstützung | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) | (Ja) |
Siehe auch
- Das Interface, durch das es definiert wird,
CanvasRenderingContext2D