ผ้าใบ HTML เปลี่ยนวิธี ()

ตัวอย่าง

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

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

ลอง»

สนับสนุนเบราว์เซอร์

Internet Explorer 9, Firefox, Opera, Chrome และ Safari สนับสนุนเปลี่ยนวิธี ()

หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ

ความหมายและการใช้งาน

วัตถุบนผืนผ้าใบแต่ละคนมีเมทริกซ์การเปลี่ยนแปลงในปัจจุบัน

เปลี่ยนวิธี () แทนเมทริกซ์การเปลี่ยนแปลงในปัจจุบัน มันคือการดำเนินการเมทริกซ์อธิบายไว้ด้านล่างเพื่อเมทริกซ์การเปลี่ยนแปลงในปัจจุบัน:

	C	E
B	D	F
0	0	1

ในคำอื่น ๆ เปลี่ยน () ช่วยให้คุณสามารถซูมหมุนและเอียงย้ายสภาพแวดล้อมในปัจจุบัน

หมายเหตุ: การแปลงนี้จะมีผลกับการแปลง () วิธีการที่เรียกว่าหลังจากการวาดภาพ

หมายเหตุ: พฤติกรรมการแปลง () วิธีการเกี่ยวกับการอื่น ๆ แปลงโดยหมุน () ขนาด () แปล () หรือแปลง () เสร็จสมบูรณ์ตัวอย่างเช่นหากคุณได้ตั้งอยู่แล้วในการวาดภาพสองครั้งแล้วเปลี่ยน () วิธีการที่จะขยายการวาดภาพ, วาดภาพของคุณจะได้รับการขยายถึงสี่ครั้ง

เคล็ดลับ: ตรวจสอบ setTransform () วิธีการซึ่งไม่ได้เกิดขึ้นเมื่อเทียบกับพฤติกรรมแปลงอื่น ๆ

ไวยากรณ์ javascript:	บริบท .transform (A, B, C, D, E, F);

ค่าพารามิเตอร์

参数	描述
a	水平缩放绘图。
b	水平倾斜绘图。
c	垂直倾斜绘图。
d	垂直缩放绘图。
e	水平移动绘图。
f	垂直移动绘图。

คู่มือการใช้งาน HTML ผ้าใบอ้างอิง

ผ้าใบ HTML แปล () วิธีการ: ก่อนหน้านี้