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