Metoda skalowania Canvas
Definicja i zastosowanie
scale() Metoda skalowania bieżącego rysowania, większa lub mniejsza.
Komentarz:Jeśli skalujesz rysowanie, wszystkie kolejne rysunki również będą skalowane. Pozycja również będzie skalowana. Jeśli napiszesz scale(2,2)W takim przypadku rysowanie zostanie umieszczone w pozycji dwukrotnie dalej od lewego górnego rogu ekranu.
Przykład
Przykład 1
Narysuj prostokąt, powiększ do 200%, a następnie narysuj prostokąt jeszcze raz:
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);
Wskazówka:Więcej przykładów znajduje się w stopce strony.
Gramatyka
kontekst.rysowanie.scale(scalewidth,scaleheight);
Wartości parametrów
| Parametry | Opis |
|---|---|
| scalewidth | Skaluj bieżącą szerokość rysowania (1=100%, 0.5=50%, 2=200%, itp.). |
| scaleheight | Skaluj bieżącą wysokość rysowania (1=100%, 0.5=50%, 2=200%, itp.). |
Więcej przykładów
Przykład 2
Narysuj prostokąt; powiększ do 200%, narysuj ponownie prostokąt; powiększ do 200%, a następnie narysuj prostokąt jeszcze raz; powiększ do 200%, narysuj ponownie prostokąt:
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);
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.
