HTML canvas setTransform() method
Definisi dan Penggunaan
Setiap objek di atas kanvas memiliki matriks transformasi saat ini.
setTransform() metodenya menetapkan matriks transformasi saat ini ke matriks unit, dan lalu menjalankan dengan parameter yang sama transform().
Artinya, setTransform() memungkinkan anda untuk menggandakan, memutar, memindahkan, dan mengevaluasi lingkungan saat ini.
注释：Transformasi ini hanya mempengaruhi perecapan yang dilakukan setelah pemanggilan setTransform().
Contoh
Dibuatkan segi empat, dengan penggunaan setTransform() untuk menetapkan dan mencipta matriks transformasi baru, lalu lukis lagi segi empat, menetapkan dan mencipta matriks transformasi baru, lalu lukis lagi segi empat. Perhatikan, setiap kali anda panggil setTransform(), ia akan menetapkan matriks transformasi sebelumnya dan membangun matriks baru, sehingga di contoh di bawah ini, segi empat merah tidak akan ditampilkan, karena ia berada di bawah segi empat 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);
语法
context.setTransform(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> 元素。
