Contoh
Menggambar persegi panjang, menambahkan matriks transformasi baru dengan transform() , menggambar persegi lagi, menambahkan matriks transformasi baru, kemudian menarik persegi panjang lagi. Perhatikan bahwa setiap kali Anda memanggil transform() , itu dibangun di atas matriks transformasi sebelumnya:
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); Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
Setiap objek pada kanvas memiliki matriks transformasi saat ini.
The transform() metode menggantikan matriks transformasi saat ini. Mengalikan matriks transformasi saat ini dengan matriks dijelaskan oleh:
| Sebuah | c | e |
| b | d | f |
| 0 | 0 | 1 |
Dalam kata lain, transform() metode memungkinkan Anda mengatur skala, memutar, memindahkan, dan condong konteks saat ini.
Note: Transformasi hanya akan mempengaruhi gambar yang dibuat setelah transform() metode ini disebut.
Note: The transform() metode berperilaku relatif untuk transformasi lain yang dibuat oleh rotate() , scale() , translate() , atau transform() . Contoh: Jika Anda sudah mengatur gambar Anda untuk skala oleh dua, dan transform() metode skala gambar Anda dengan dua, gambar Anda sekarang akan skala empat.
Tip: Check out setTransform() metode, yang tidak berperilaku relatif untuk transformasi lainnya.
| sintaks JavaScript: | context . transform( a,b,c,d,e,f ) ; |
|---|
Nilai parameter
| Parameter | Deskripsi | Mainkan |
|---|---|---|
| a | Timbangan yang menggambar secara horizontal | Mainkan " |
| b | Membelokkan menggambar horizontal | Mainkan " |
| c | Membelokkan menggambar secara vertikal | Mainkan " |
| d | Timbangan yang menggambar secara vertikal | Mainkan " |
| e | Memindahkan menggambar horizontal | Mainkan " |
| f | Memindahkan menggambar secara vertikal | Mainkan " |
<Canvas Object