Örnek
Bir dikdörtgen çizer sıfırlamak ve yeni bir dönüşüm matrisi oluşturmak setTransform() yine dikdörtgen çizin sıfırlamak ve yeni dönüşüm matrisi oluşturmak ve sonra tekrar dikdörtgen çizin. Aradığınızda her zaman dikkat edin setTransform() , bir önceki transformasyon matrisi sıfırlar ve aşağıdaki örnekte, kırmızı dikdörtgen gösterilmez yüzden mavi dikdörtgenin altında olması nedeniyle, daha sonra, yeni matris oluşturur:
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);
Kendin dene " Tarayıcı Desteği
Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.
| Yöntem | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Tanımı ve Kullanımı
tuvale Her nesne, mevcut dönüşüm matrisi vardır.
setTransform() metodu mevcut kimlik matrisine dönüşümü sıfırlar ve çalışır transform() , aynı argüman.
Diğer bir deyişle, setTransform() yöntemi, hareket döndürme, ölçeklendirme, ve mevcut bağlam çarpıtabilir sağlar.
Note: SetTransform yöntemi olarak adlandırılır sonra dönüşümü yalnızca yapılan çizimler etkileyecektir.
| JavaScript sözdizimi: | context . setTransform( a,b,c,d,e,f ) ; |
|---|
Parametre Değerleri
| Parametre | Açıklama | Oynat |
|---|---|---|
| a | yatay çizimler Scales | Oynat " |
| b | yatay çizimler eğriltir | Oynat " |
| c | dikey olarak çizimler eğriltir | Oynat " |
| d | dikey olarak çizimler teraziler | Oynat " |
| e | yatay çizimler taşır | Oynat " |
| f | dikey olarak çizimler taşır | Oynat " |
<Tuval Nesne