HTML canvas setTransform() method
Pagsasakop at Paggamit
Ang bawat bagay sa laman ng canvas ay may kasalukuyang transformasyon matrix.
setTransform() Ang paraan na ito ay nag-reset ng kasalukuyang transformasyon matrix sa isang unity matrix, at pagkatapos ay nagpapatuloy sa parehong mga parametro. transform().
Sa ibang salita, ang setTransform() ay nagbibigay-daan sa iyo na skalang, irotate, ilihis at i倾斜 ang kasalukuyang kapaligiran.
หมายเหตุ：Ang pagbabago na ito ay makakaapekto lamang sa pagpipinta pagkatapos ng pagtawag sa setTransform().
Sample
Magtanim ng isang parihaba, sa pamamagitan ng pag-reset at paglikha ng bagong transformasyon matrix, magtanim muli ng parihaba, pag-reset at paglikha ng bagong transformasyon matrix, at pagkatapos ay magtanim muli ng parihaba. Isipin na, bawat pagtawag sa setTransform(), ito ay nag-reset ng nakaraang transformasyon matrix at nagbuubuo ng bagong matrix, kaya walang ipapakita ang pulang parihaba sa ibaba ng asul na parihaba sa ibaba:
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);
ภาษาสyntax
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>
