วิธี HTML canvas setTransform()

คู่มืออ้างอิง HTML5 Canvas

คำอธิบายและวิธีใช้

แต่ละวัตถุบนกระดานวาดมีตารางแปลงตารางปัจจุบัน

setTransform() วิธีที่ใช้เพื่อรีเซ็ตตารางแปลงตารางปัจจุบันเป็นตารางหนึ่งเดียวกัน และทำงานด้วยตัวอักษรเดียวกัน transform().

ความหมายกันว่า setTransform() อนุญาตให้คุณขยายตัว หมุน ย้าย และมุมตัวสภาพปัจจุบัน

หมายเหตุ：การแปลงตารางนี้จะส่งผลกระทบต่อการวาดที่เรียกใช้ setTransform() หลังจากนั้น

ตัวอย่าง

วาดสี่เหลี่ยมผืนผ้า ผ่าน setTransform() ที่เรียกใช้เพื่อรีเซ็ตและสร้างตัวแปลงตารางใหม่ วาดสี่เหลี่ยมผืนผ้าอีกครั้ง รีเซ็ตและสร้างตัวแปลงตารางใหม่ แล้ววาดสี่เหลี่ยมผืนผ้าอีกครั้ง โปรดจำได้ว่า เมื่อคุณเรียกใช้ setTransform() มันจะรีเซ็ตตารางแปลงตารางก่อนหน้าและสร้างตารางใหม่ ดังนั้นในตัวอย่างด้านล่าง จะไม่มีสี่เหลี่ยมผืนผ้าสีแดง เพราะมันอยู่ใต้สี่เหลี่ยมผืนผ้าสีสีน้ำเงิน:

Your browser does not support the HTML5 canvas tag.

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);

ทดลองด้วยตัวเอง

รูปแบบ

context.setTransform(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>

คู่มืออ้างอิง HTML5 Canvas