Metode Canvas setTransform()
Definisi dan penggunaan
Setiap objek di atas kanvas memiliki matriks transformasi saat ini.
setTransform() metode mengatur matriks transformasi saat ini menjadi matriks unit, dan lalu menjalankan dengan parameter yang sama transform().
Dengan kata lain, setTransform() memungkinkan Anda menggandakan, memutar, memindahkan, dan mengecilkan lingkungan saat ini.
Keterangan:Transformasi ini hanya mempengaruhi pengerisan setelah pemanggilan setTransform().
Contoh
Gambar sebuah lingkaran, dengan menggunakan setTransform() untuk menetapkan dan membuat matriks transformasi baru, gambar kembali lingkaran, menetapkan dan membuat matriks transformasi baru, lalu gambar kembali lingkaran. Perhatikan, setiap kali Anda memanggil setTransform(), ia akan menetapkan matriks transformasi sebelumnya dan membangun matriks baru, sehingga di contoh di bawah ini, lingkaran merah tidak akan ditampilkan karena ia berada di bawah lingkaran 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);
Sintaks
context.setTransform(a,b,c,d,e,f);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| a | Pemindahan skala kiri horizontal gambar. |
| b | Pemindahan skala kiri horizontal gambar. |
| c | Pemindahan skala kiri vertikal gambar. |
| d | Pemindahan skala vertikal gambar. |
| e | Gambaran gerakan horizontal. |
| f | Gambaran gerakan vertikal. |
Dukungan Browser
Angka di tabel menunjukkan versi browser pertama yang mendukung sifat ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.
