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