วิธี transform() ของ canvas HTML
คำอธิบายและวิธีใช้
ทุกวัตถุบนกระดานวาดมีมตรฐานการแปลงปัจจุบัน
transform() วิธีแทนที่มตรฐานการแปลงปัจจุบัน มันจะปฏิบัติต่อมตรฐานการแปลงปัจจุบันด้วยมตรฐานการแปลงที่อธิบายด้านล่าง:
a c e b d f 0 0 1
ดังนั้น transform() อนุญาตให้คุณขยาย หมุน ย้าย และมีมุมความคลองต่อสภาพปัจจุบัน
หมายเหตุ：การแปลงนี้จะส่งผลกระทบเฉพาะการวาดที่เรียก transform() ต่อไป
หมายเหตุ：การทำงานของวิธี transform() ขึ้นอยู่กับ rotate()、scale()、translate() หรือการแปลงอื่นๆ ที่ทำด้วย transform() ตามไปนี้ ตัวอย่าง: หากคุณได้ตั้งค่าการวาดเป็นการขยายสองเท่า วิธี transform() จะขยายวาดสองเท่า ดังนั้นวาดของคุณจะขยายสี่เท่า
คำแนะนำ:โปรดดู setTransform() วิธีที่จะทำงานไม่ขึ้นอยู่กับการแปลงอื่นๆ
ตัวอย่าง
วาดสี่เหลี่ยมขอบตรง; ใช้ 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);
ภาษาบัญญัติ
context.transform(a,b,c,d,e,f);
ตัวแปรค่า
| ตัวแปร | การอธิบาย |
|---|---|
| a | การวาดการขยายตั้งแต่ด้านซ้าย |
| b | การวาดการคลื่นตั้งแต่ด้านซ้าย |
| c | การวาดการคลื่นตั้งแต่ด้านบน |
| d | การวาดการขยายตั้งแต่ด้านบน |
| e | การวาดการเคลื่อนที่ตั้งแต่ด้านซ้าย |
| f | การวาดการเคลื่อนที่ตั้งแต่ด้านบน |
การสนับสนุนโปรแกรมนำ
ตัวเลขในตารางนี้ระบุว่าเวอร์ชั่นแรกที่สนับสนุนคุณสมบัตินี้
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ：Internet Explorer 8 และเวอร์ชั่นเก่ากว่านี้ไม่สนับสนุนองค์ประกอบ <canvas>
