วิธี Canvas setTransform()

คู่มือ Canvas

การระบุและการใช้งาน

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

setTransform() วิธีนี้จะตั้งต้นมตรศาสตร์ปัจจุบันเป็นมตรศาสตร์หนึ่งเดียว แล้วทำงานด้วยตัวเลขเดียวกัน transform().

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

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

ตัวอย่าง

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

เว็บเครื่องปฏิบัติการของคุณไม่สนับสนุนแท็ก HTML5 canvas。

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>

คู่มือ Canvas