HTML kanvas setTransform () Metode
Contoh
Gambar persegi panjang, reset dan buat matriks transformasi baru dengan setTransform(), gambar persegi panjang lagi, reset dan buat matriks transformasi baru, lalu gambar persegi panjang lagi. Perhatikan bahwa setiap kali Anda memanggil setTransform(), itu me-reset matriks transformasi sebelumnya dan kemudian membangun matriks baru, jadi dalam contoh di bawah ini, 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);
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
Setiap objek di kanvas memiliki matriks transformasi saat ini.
Metode setTransform() menyetel ulang transformasi saat ini ke matriks identitas, lalu menjalankan transform() dengan argumen yang sama.
Dengan kata lain, metode setTransform() memungkinkan Anda menskalakan, memutar, memindahkan, dan memiringkan konteks saat ini.
Catatan: Transformasi hanya akan mempengaruhi gambar yang dibuat setelah metode setTransform dipanggil.
| Sintaks JavaScript: | konteks .setTransform( a, b, c, d, e, f ); |
|---|
Nilai Parameter
| Parameter | Description | Play it |
|---|---|---|
| a | Scales the drawings horizontally | |
| b | Skews the drawings horizontally | |
| c | Skews the drawings vertically | |
| d | Scales the drawings vertically | |
| e | Moves the the drawings horizontally | |
| f | Moves the the drawings vertically |
Objek Kanvas