Örnek
Yeni bir dönüşüm matrisi ekleme, dikdörtgen çizer transform() yeniden dikdörtgen çizin yeni dönüşüm matrisinin eklemek, daha dikdörtgen çizin. Aradığınızda her zaman dikkat edin transform() , önceki dönüşüm matrisi üzerine inşa:
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); Kendin dene " Tarayıcı Desteği
Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.
| Yöntem | |||||
|---|---|---|---|---|---|
| transform() | 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.
transform() metodu mevcut dönüşüm matrisi yerini alır. Bu tarif edilen matris ile mevcut dönüşüm matrisi çarpar:
| bir | c | e |
| b | d | f |
| 0 | 0 | 1 |
Diğer bir deyişle, transform() yöntemi, hareket döndürme, ölçeklendirme sağlar ve mevcut bağlam çarpıtabilir.
Note: sonra dönüşümü yalnızca yapılan çizimler etkiler transform() yöntemi olarak adlandırılır.
Note: transform() yöntem tarafından yapılan diğer dönüşümler için nispeten hareket rotate() , scale() , translate() veya transform() . Örnek: Zaten iki tarafından ölçeğine çiziminizi belirledik ve varsa transform() metodu iki tarafından çizimleri ölçekler, çizimlerin dörde şimdi ölçek olacak.
Tip: göz atın setTransform() diğer dönüşümler nispeten davranmaz yöntemi.
| JavaScript sözdizimi: | context . transform( a,b,c,d,e,f ) ; |
|---|
Parametre Değerleri
| Parametre | Açıklama | Oynat |
|---|---|---|
| a | yatay çizim Scales | Oynat " |
| b | olarak çekme skew | Oynat " |
| c | dikey olarak çizim skew | Oynat " |
| d | dikey çekme teraziler | Oynat " |
| e | olarak çekme taşır | Oynat " |
| f | dikey çekme taşır | Oynat " |
<Tuval Nesne