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