HTML canvas transform() method
Pagsasakop at Paggamit
Ang bawat bagay sa layo ng canvas ay may kasalukuyang matris ng pagbabagong hugis.
transform() Ang paraan na ito ay pinapalitan ang kasalukuyang matris ng pagbabagong hugis. Ito ay gagamitin ang sumusunod na matris sa paggamit sa kasalukuyang matris ng pagbabagong hugis:
a c e b d f 0 0 1
Sa ibang salita, ang transform() ay nagbibigay-daan sa iyo na i-scale, i-rotate, i-move at i-slant ang kasalukuyang kapaligiran.
หมายเหตุ：Ang pagbabagong hugis na ito ay makikitungo lamang sa paggawa ng drawing na ginawa pagkatapos ng pagtawag sa transform() method.
หมายเหตุ：Ang pagbabahagi ng transform() na paraan ay may kaugnayan sa rotate(),scale(),translate() o iba pang pagbabagong hugis na ginawa sa pamamagitan ng transform(). Halimbawa: Kung pinag-set ang paggawa ng drawing sa dalawang beses, ang paraan na transform() ay magpapalaki ng drawing ng dalawang beses, at ang iyong drawing ay magiging apat na beses ang laki.
Paalala:Mangyaring tingnan setTransform() Ang paraan na ito ay hindi makikitungo sa ibang pagbabagong hugis.
Mga halimbawa
Ihanda ang isang parihaba; magdudulot ng bagong matris ng pagbabagong hugis sa pamamagitan ng transform(), muling magdudulot ng parihaba; magdudulot ng bagong matris ng pagbabagong hugis at muling magdudulot ng parihaba. Mangyaring mag-ingat, bawat pagtawag sa transform() ay magtatayo sa nakaraang matris ng pagbabagong hugis:
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> อิเล็กทรอนิกส์
