HTML canvas setTransform () Yöntemi
Örnek
Bir dikdörtgen çizin, setTransform() ile sıfırlayın ve yeni bir dönüşüm matrisi oluşturun, dikdörtgeni tekrar çizin, sıfırlayın ve yeni bir dönüşüm matrisi oluşturun, ardından dikdörtgeni tekrar çizin. setTransform()'u her çağırdığınızda, önceki dönüşüm matrisini sıfırladığına ve ardından yeni matrisi oluşturduğuna dikkat edin, bu nedenle aşağıdaki örnekte kırmızı dikdörtgen, mavi dikdörtgenin altında olduğu için gösterilmez:
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);
Tarayıcı Desteği
Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
Tanım ve Kullanım
Tuval üzerindeki her nesnenin geçerli bir dönüşüm matrisi vardır.
setTransform() yöntemi, geçerli dönüşümü kimlik matrisine sıfırlar ve ardından transform() 'u aynı argümanlarla çalıştırır.
Başka bir deyişle, setTransform() yöntemi, geçerli bağlamı ölçeklemenize, döndürmenize, taşımanıza ve eğmenize olanak tanır.
Not: Dönüştürme, yalnızca setTransform yöntemi çağrıldıktan sonra yapılan çizimleri etkiler.
| JavaScript sözdizimi: | bağlam .setTransform( a,b,c,d,e,f ); |
|---|
Parametre Değerleri
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ HTML Kanvas Referansı