HTML canvas setTransform() yöntemi
Tanım ve Kullanım
Dekuanın üzerindeki her nesne, mevcut bir transformasyon matrisine sahiptir.
setTransform() yöntemi, mevcut transformasyon matrisini birim matrise sıfırlar, ardından aynı parametrelerle çalışır transform().
Diyelim ki, setTransform() size mevcut ortamı ölçeklendirmek, döndürmek, hareket ettirmek ve eğimlendirmek için izin verir.
Açıklama:Bu transformasyon sadece setTransform() yöntemi çağrıldıktan sonra çizime etki eder.
Örnek
Bir dikdörtgen çizmek için setTransform() ile transformasyon matrisini sıfırlayıp yeni bir transformasyon matrisi oluşturun, ardından yine bir dikdörtgen çizin, transformasyon matrisini sıfırlayıp yeni bir matris oluşturun ve ardından bir kez daha bir dikdörtgen çizin. Lütfen dikkat edin, her seferinde setTransform() çağrıldığında, önceki transformasyon matrisi sıfırlanır ve yeni bir matris oluşturulur, bu yüzden aşağıdaki örnekte kırmızı dikdörtgen gösterilmez çünkü mavi dikdörtgenin 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);
Sözdizimi
context.setTransform(a,b,c,d,e,f);
Parametre değeri
| Parametre | Açıklama |
|---|---|
| a | Dikdörtgen yatay döndürme çizimi. |
| b | Dikdörtgen dikey eğim çizimi. |
| c | Dikdörtgen yatay eğim çizimi. |
| d | Dikdörtgen ölçeklendirme çizimi. |
| e | Dikdörtgen hareket çizimi. |
| f | Dikdörtgen hareket çizimi. |
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.
