Metode transform() kanvas HTML
Definisi dan Penggunaan
Setiap objek di atas kanvas memiliki matrix transformasi saat ini.
transform() Metode untuk menggantikan matrix transformasi saat ini. Ia akan operasikan matrix transformasi saat ini dengan matrix berikut yang dijelaskan:
a c e b d f 0 0 1
Dengan kata lain, transform() memungkinkan anda mengukur, memutar, memindahkan dan mengecilkan lingkungan saat ini.
注释：Transformasi ini hanya akan mempengaruhi pengerasan setelah pemanggilan metode transform().
注释：Perilaku metode transform() berhadapan dengan rotate()、scale()、translate() atau transformasi lain yang selesai dengan transform(). Contohnya: Jika anda sudah menyiarkan pengerasan gambar kepada 2 kali, metode transform() akan memperbesar pengerasan 2 kali, dan pengerasan akhir anda akan memperbesar 4 kali.
Petikan:Lihat setTransform() Metode, ia tidak akan berperilaku terhadap transformasi lain.
Contoh
Menggambar satu persegi; tambahkan matrix transformasi baru dan gambar kembali persegi; tambahkan matrix transformasi baru dan gambar kembali persegi. Perhatikan, setiap kali anda panggil transform(), ia akan membangun di atas matrix 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);
语法
context.transform(a,b,c,d,e,f);
参数值
| 参数 | 描述 |
|---|---|
| a | 水平缩放绘图。 |
| b | 水平倾斜绘图。 |
| c | 垂直倾斜绘图。 |
| d | 垂直缩放绘图。 |
| e | 水平移动绘图。 |
| f | 垂直移动绘图。 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
