วิธี Canvas translate()

คู่มือ Canvas

การประกาศและการใช้งาน

translate() เพื่อกำหนดค่าตำแหน่ง (0,0) ใหม่บนกระดานวาด

หมายเหตุ：เมื่อคุณเรียกใช้วิธีเช่น fillRect() ค่าจะถูกเพิ่มเข้าสู่ x และวิธีเช่นนี้ y ค่าตำแหน่ง

แสดงกราฟของเมธอด translate()

ตัวอย่าง

วาดสี่เหลี่ยมผืนผันที่ตำแหน่ง (10,10) และตั้งตำแหน่ง (0,0) ใหม่เป็น (70,70) อีกครั้ง วาดสี่เหลี่ยมผืนผันใหม่ (โปรดสังเกตว่าสี่เหลี่ยมผืนผันปัจจุบันเริ่มวาดที่ตำแหน่ง (80,80)):

เว็บเบราส์เซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

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

ระบบข้อความ

context.translate(x,y);

ค่าตัวแปร

ตัวแปร คำอธิบาย
x ค่าที่เพิ่มเข้าสู่ตำแหน่ง (x) ของเส้นตรงตั้งแนวนอน
y ค่าที่เพิ่มเข้าสู่ตำแหน่ง (y) ของเส้นตรงตั้งแนวตั้งฝั่ง

การสนับสนุนโดยเครื่องมือเว็บบราวเซอร์

ตัวเลขในตารางนี้บอกเล่าถึงรุ่นการใช้งานแรกที่สนับสนุนคุณสมบัตินี้

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