ผ้าใบ HTML setTransform ()เมธอด
ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้า รีเซ็ตและสร้างเมทริกซ์การแปลงใหม่ด้วย setTransform() วาดรูปสี่เหลี่ยมผืนผ้าอีกครั้ง รีเซ็ตและสร้างเมทริกซ์การแปลงใหม่ จากนั้นวาดรูปสี่เหลี่ยมผืนผ้าอีกครั้ง สังเกตว่าทุกครั้งที่คุณเรียก setTransform() มันจะรีเซ็ตเมทริกซ์การแปลงก่อนหน้า และสร้างเมทริกซ์ใหม่ ดังนั้นในตัวอย่างด้านล่าง สี่เหลี่ยมสีแดงจะไม่แสดง เนื่องจากอยู่ใต้สี่เหลี่ยมสีน้ำเงิน:
จาวาสคริปต์:
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);
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
แต่ละอ็อบเจ็กต์บนผืนผ้าใบมีเมทริกซ์การแปลงปัจจุบัน
เมธอด setTransform() จะรีเซ็ตการแปลงปัจจุบันเป็นเมทริกซ์เอกลักษณ์ จากนั้นรันtransform() ด้วยอาร์กิวเมนต์เดียวกัน
กล่าวอีกนัยหนึ่งเมธอด setTransform() ช่วยให้คุณปรับขนาด หมุน ย้าย และบิดเบือนบริบทปัจจุบันได้
หมายเหตุ:การแปลงจะมีผลกับภาพวาดที่สร้างขึ้นหลังจากเรียกเมธอด setTransform เท่านั้น
| ไวยากรณ์ JavaScript: | บริบท .setTransform ( 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