วิธี translate() ของ HTML canvas
คำนำทางและการใช้งาน
translate() เมธอดเพื่อเรียกแปลงตำแหน่ง (0,0) บนกระดานวาด
หมายเหตุ：เมื่อคุณเรียกเมธอดที่เปลี่ยนแปลงตำแหน่ง (0,0) บนกระดานวาดหลังจาก translate() fillRect() ในกรณีที่ใช้วิธีเช่น x และ y ค่าพิกัด
ตัวอย่าง
วาดสี่เหลี่ยมในตำแหน่ง (10,10) และตั้งตำแหน่ง (0,0) ใหม่เป็น (70,70) วาดสี่เหลี่ยมใหม่อีกครั้ง (โปรดสังเกตว่าสี่เหลี่ยมเริ่มวาดจากตำแหน่ง (80,80))：
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 | ค่าที่เพิ่มไปบนตำแหน่งตัวเลขตั้งแต่ตำแหน่งตัวเลขที่ตั้ง |
| 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> อิเล็กทรอนิก
