HTML canvas transform() Yöntemi
Örnek
Bir dikdörtgen çizin, transform() ile yeni bir dönüşüm matrisi ekleyin, dikdörtgeni tekrar çizin, yeni bir dönüşüm matrisi ekleyin, sonra dikdörtgeni tekrar çizin. transform()'u her çağırdığınızda, önceki dönüşüm matrisini oluşturduğuna dikkat edin:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(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 | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Tanım ve Kullanım
Tuval üzerindeki her nesnenin geçerli bir dönüşüm matrisi vardır.
transform() yöntemi, geçerli dönüşüm matrisinin yerini alır. Mevcut dönüşüm matrisini şu şekilde tanımlanan matrisle çarpar:
| a | C | e |
| B | D | F |
| 0 | 0 | 1 |
Başka bir deyişle, transform() yöntemi, geçerli bağlamı ölçeklendirmenize, döndürmenize, taşımanıza ve eğmenize olanak tanır.
Not: Dönüşüm, yalnızca transform() yöntemi çağrıldıktan sonra yapılan çizimleri etkiler.
Not: transform() yöntemi, döndürme(), scale(), translate() veya transform() tarafından yapılan diğer dönüştürmelere göreli olarak davranır. Örnek: Çiziminizi zaten ikiye ölçekleyecek şekilde ayarladıysanız ve transform() yöntemi çizimlerinizi ikiye ölçeklendirirse, çizimleriniz şimdi dörde ölçeklenir.
İpucu: Diğer dönüşümlere göre davranmayan setTransform() yöntemini kontrol edin .
| JavaScript sözdizimi: | bağlam .transform( 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ı