การแปลง ผ้าใบ HTML ()วิธี การ
ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้า เพิ่มเมทริกซ์การแปลงใหม่ด้วย transform() วาดรูปสี่เหลี่ยมผืนผ้าอีกครั้ง เพิ่มเมทริกซ์การแปลงใหม่ จากนั้นวาดรูปสี่เหลี่ยมผืนผ้าอีกครั้ง สังเกตว่าทุกครั้งที่คุณเรียก transform() มันจะสร้างจากเมทริกซ์การแปลงก่อนหน้า:
จาวาสคริปต์:
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);
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
แต่ละอ็อบเจ็กต์บนผืนผ้าใบมีเมทริกซ์การแปลงปัจจุบัน
เมธอด transform() แทนที่เมทริกซ์การแปลงปัจจุบัน มันคูณเมทริกซ์การแปลงปัจจุบันด้วยเมทริกซ์ที่อธิบายโดย:
| เอ | ค | อี |
| ข | d | ฉ |
| 0 | 0 | 1 |
พูดอีกอย่างก็คือ เมธอด transform() ช่วยให้คุณปรับขนาด หมุน ย้าย และบิดเบือนบริบทปัจจุบันได้
หมายเหตุ:การแปลงจะมีผลกับภาพวาดที่สร้างขึ้นหลังจากเรียกเมธอด transform() เท่านั้น
หมายเหตุ:เมธอด transform() ทำงานค่อนข้างคล้ายกับการแปลงอื่นๆ ที่ทำโดยการหมุน (), มาตราส่วน (), การแปล () หรือการแปลง () ตัวอย่าง: หากคุณได้ตั้งค่ารูปวาดของคุณเป็นมาตราส่วนสองแล้ว และเมธอด transform() ปรับขนาดรูปวาดของคุณเป็นสองเท่า ตอนนี้รูปวาดของคุณจะขยายขนาดเป็นสี่
เคล็ดลับ:ลองดูเมธอด setTransform()ซึ่งไม่เหมือนกับการแปลงแบบอื่นๆ
| ไวยากรณ์ JavaScript: | บริบท .transform ( a,b,c,d,e,f ); |
|---|
ค่าพารามิเตอร์
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ การอ้างอิงผ้าใบ HTML