Metoda skalowania HTML canvas
Definicja i użycie
scale() metoda skalowania bieżącego rysunku, większa lub mniejsza.
Komentarz:Jeśli skalujesz rysunek, wszystkie następne rysunki również będą skalowane. Pozycja również będzie skalowana. Jeśli napiszesz scale(2,2)wtedy rysunek zostanie umieszczony w odległości dwukrotnej od góry lewego rogu płótna.
Przykład
Przykład 1
Narysuj prostokąt, powiększ go do 200%, a następnie 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);
Wskazówka:Więcej przykładów znajduje się na dole strony.
Gramatyka
context.scale(scalewidth,scaleheight);
Wartość parametru
| Parametr | Opis |
|---|---|
| scalewidth | Skaluj szerokość bieżącego rysunku (1=100%, 0.5=50%, 2=200%, itp.). |
| scaleheight | Skaluj wysokość bieżącego rysunku (1=100%, 0.5=50%, 2=200%, itp.). |
Więcej przykładów
Przykład 2
Narysuj prostokąt; powiększ do 200%, narysuj prostokąt ponownie; powiększ do 200%, narysuj prostokąt ponownie; powiększ do 200%, narysuj prostokąt ponownie:
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>.
