ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้าเพิ่มเมทริกซ์การเปลี่ยนแปลงใหม่ที่มี transform() วาดสี่เหลี่ยมอีกครั้งเพิ่มเมทริกซ์การเปลี่ยนแปลงใหม่แล้ววาดรูปสี่เหลี่ยมอีกครั้ง ขอให้สังเกตว่าทุกครั้งที่คุณโทร transform() มันสร้างขึ้นบนเมทริกซ์การเปลี่ยนแปลงก่อนหน้านี้:
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); ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| transform() | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
ความหมายและการใช้งาน
วัตถุบนผืนผ้าใบแต่ละคนมีเมทริกซ์การเปลี่ยนแปลงในปัจจุบัน
transform() วิธีการแทนที่เมทริกซ์การเปลี่ยนแปลงในปัจจุบัน จะมีการคูณเมทริกซ์การเปลี่ยนแปลงในปัจจุบันมีเมทริกซ์อธิบายโดย:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
ในคำอื่น ๆ ที่ transform() วิธีการช่วยให้คุณสามารถปรับขนาด, หมุน, ย้ายและเอียงบริบทปัจจุบัน
หมายเหตุ: การเปลี่ยนแปลงจะมีผลเฉพาะภาพวาดทำหลังจากที่ transform() วิธีการที่เรียกว่า
หมายเหตุ: transform() วิธีการทำงานที่ค่อนข้างที่จะแปลงอื่น ๆ ที่ทำโดยการ rotate(), scale(), translate() หรือ transform()ตัวอย่าง: หากคุณได้ตั้งรูปวาดของคุณที่จะไต่สองและ transform() วิธีการชั่งภาพวาดของคุณสองภาพวาดของคุณจะขนาดสี่
เคล็ดลับ: ตรวจสอบ setTransform() วิธีการซึ่งไม่ได้มีพฤติกรรมที่ค่อนข้างที่จะแปลงอื่น ๆ
| ไวยากรณ์ javascript: | context.transform( a,b,c,d,e,f ); |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ | เล่น |
|---|---|---|
| a | เครื่องชั่งน้ำหนักการวาดภาพในแนวนอน | เล่น " |
| b | เอียงวาดภาพในแนวนอน | เล่น " |
| c | เอียงวาดภาพในแนวตั้ง | เล่น " |
| d | เครื่องชั่งน้ำหนักการวาดภาพในแนวตั้ง | เล่น " |
| e | ย้ายภาพวาดแนวนอน | เล่น " |
| f | ย้ายวาดภาพในแนวตั้ง | เล่น " |