tutorial pengembangan web terbaru
 

HTML canvas setTransform() Method

<Canvas Object

Contoh

Menggambar persegi panjang, reset dan membuat matriks transformasi baru dengan setTransform() , menggambar persegi lagi, reset dan membuat matriks transformasi baru, kemudian menarik persegi panjang lagi. Perhatikan bahwa setiap kali Anda memanggil setTransform() , itu me-reset matriks transformasi sebelumnya dan kemudian membangun matriks baru, sehingga pada contoh di bawah, persegi panjang merah tidak ditampilkan, karena berada di bawah persegi panjang biru:

YourbrowserdoesnotsupporttheHTML5canvastag.

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);
Cobalah sendiri "

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metode
setTransform() 4.0 9.0 3.6 4.0 10.1

Definisi dan Penggunaan

Setiap objek pada kanvas memiliki matriks transformasi saat ini.

The setTransform() metode me-reset mengubah arus ke matriks identitas, dan kemudian berjalan transform() dengan argumen yang sama.

Dalam kata lain, setTransform() metode memungkinkan Anda mengatur skala, memutar, memindahkan, dan condong konteks saat ini.

Note: Transformasi hanya akan mempengaruhi gambar yang dibuat setelah metode setTransform disebut.

sintaks JavaScript: context . setTransform( a,b,c,d,e,f ) ;

Nilai parameter

Parameter Deskripsi Mainkan
a Timbangan gambar horizontal Mainkan "
b Skews gambar horizontal Mainkan "
c Skews gambar secara vertikal Mainkan "
d Timbangan gambar secara vertikal Mainkan "
e Memindahkan gambar horizontal Mainkan "
f Memindahkan gambar secara vertikal Mainkan "

<Canvas Object