Canvas setTransform() Metodu
Tanım ve Kullanım
Her çizim nesnesi, mevcut dönüşmatrisine sahiptir.
setTransform() Metodu, mevcut dönüşmatrisini birim matrise sıfırlar ve aynı parametrelerle çalıştırır transform().
Diğer bir deyişle, setTransform() size mevcut ortamı ölçeklendirmek, döndürmek, hareket ettirmek ve eğimlendirmek için izin verir.
Açıklama:Bu dönüşüm, setTransform() yöntemi çağrısından sonraki çizimleri etkiler.
Örnek
Bir düzge çizmek için setTransform() ile yeni bir dönüşmatrisi oluşturun ve tekrar çizin, ardından tekrar yeni bir dönüşmatrisi oluşturun ve bir kez daha çizin. Dikkat edin ki, her setTransform() çağrısı, önceki dönüşmatrisini sıfırlar ve yeni bir matris oluşturur, bu yüzden aşağıdaki örnekte kırmızı düzge gösterilmez çünkü mavi düzge altındadır:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Gramer
context.setTransform(a,b,c,d,e,f);
Parametre değeri
| Parametre | Açıklama |
|---|---|
| a | Yatay döndürme çizgi. |
| b | Yatay eğim çizgi. |
| c | Dik yatay eğim çizgi. |
| d | Dik çizgi ölçeklendirme. |
| e | Düz horizontal hareket çizim. |
| f | Dik vertical hareket çizim. |
Tarayıcı desteği
Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> ögesini desteklememektedir.
