En son web geliştirme öğreticiler
 

HTML canvas transform() Method

<HTML Tuval Referans

Ö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:

YourbrowserdoesnotsupporttheHTML5canvastag.

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() Evet 9.0 Evet Evet Evet

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:

a 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 "

<HTML Tuval Referans