Contoh
Menggambar persegi panjang, reset dan membuat matriks transformasi baru dengan setTransform() , menggambar persegi panjang lagi, reset dan membuat matriks transformasi baru, kemudian menggambar 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 kotak 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() | iya nih | 9.0 | iya nih | iya nih | iya nih |
Definisi dan Penggunaan
Setiap objek pada kanvas memiliki matriks transformasi saat.
The setTransform() metode reset mengubah arus ke matriks identitas, dan kemudian berjalan transform() dengan argumen yang sama.
Dalam kata lain, setTransform() metode memungkinkan Anda mengatur skala, memutar, bergerak, dan condong konteks saat ini.
Catatan: 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 " |