HTML kanvas transformasi () metode
contoh
Menggambar persegi panjang dengan transformasi () untuk menambahkan matriks transformasi baru, lagi menggambar persegi panjang, menambahkan matriks transformasi baru, dan kemudian menggambar persegi panjang lagi. Harap dicatat bahwa setiap kali Anda memanggil mengubah (), itu akan menjadi yang pertama untuk membangun transformasi pada matriks:
JavaScript:
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);
Coba »
Dukungan Browser
Internet Explorer 9, dukungan Firefox, Opera, Chrome dan Safari mengubah metode ().
Catatan: 8 dan versi sebelumnya dari Internet Explorer tidak mendukung <canvas> elemen.
Definisi dan Penggunaan
Setiap objek pada kanvas memiliki matriks transformasi saat.
transform () metode menggantikan matriks transformasi saat. Ini adalah operasi matriks diuraikan di bawah untuk matriks transformasi saat ini:
| sebuah | c | e |
| b | d | f |
| 0 | 0 | 1 |
Dengan kata lain, mengubah () memungkinkan Anda untuk memperbesar, memutar, bergerak dan miring lingkungan saat ini.
Catatan: Konversi ini hanya akan mempengaruhi metode transformasi () disebut setelah gambar.
Catatan: Perilaku mengubah metode () sehubungan dengan lainnya dikonversi oleh rotate (), skala (), menerjemahkan () atau mengubah () selesai.Misalnya: Jika Anda telah mengatur ke dalam gambar dua kali, kemudian mengubah () metode akan memperbesar gambar, gambar Anda akhirnya akan diperbesar sampai empat kali.
Tip: Periksa setTransform () metode, yang tidak terjadi relatif untuk mengubah perilaku lainnya.
| sintaks JavaScript: | konteks .transform (a, b, c, d, e, f); |
|---|
Nilai parameter
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |
Pedoman kanvas Referensi HTML