HTML tuval ölçeği() Yöntem
Örnek
Bir dikdörtgen çizin, %200'e ölçeklendirin ve ardından tekrar dikdörtgen çizin:
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);
Tarayıcı Desteği
Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Method | |||||
|---|---|---|---|---|---|
| scale() | Yes | 9.0 | Yes | Yes | Yes |
Tanım ve Kullanım
Scale() yöntemi, geçerli çizimi daha büyük veya daha küçük olarak ölçekler.
Not: Bir çizimi ölçeklerseniz, gelecekteki tüm çizimler de ölçeklenir. Konumlandırma da ölçeklenecektir. Ölçeklerseniz(2,2); çizimler, belirttiğiniz gibi tuvalin solundan ve üstünden iki kat uzağa yerleştirilecektir.
| JavaScript sözdizimi: | bağlam .scale( scalewidth,scaleheight ); |
|---|
Parametre Değerleri
| Parameter | Description | Play it |
|---|---|---|
| scalewidth | Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) | |
| scaleheight | Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) |
Daha fazla örnek
Örnek
Bir dikdörtgen çizin, %200'e ölçeklendirin, tekrar dikdörtgen çizin, %200'e ölçeklendirin, tekrar dikdörtgen çizin, %200'e ölçeklendirin, tekrar dikdörtgen çizin:
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);
❮ HTML Kanvas Referansı