ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้าอยู่ในตำแหน่ง (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);
ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| translate() | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
ความหมายและการใช้งาน
translate() วิธี remaps (0,0) ตำแหน่งบนผืนผ้าใบ
หมายเหตุ: เมื่อคุณเรียกวิธีการเช่น fillRect() หลังจาก translate() ค่าที่ถูกเพิ่มเข้าไปในแกน X และ Y-ค่าพิกัด
| ไวยากรณ์ javascript: | context.translate( x,y ); |
|---|
ค่าพารามิเตอร์
หมายเหตุ: คุณสามารถระบุหนึ่งหรือทั้งสองพารามิเตอร์
| พารามิเตอร์ | ลักษณะ | เล่น |
|---|---|---|
| x | ค่าที่จะเพิ่มในแนวนอน (x) พิกัด | เล่น " |
| y | ค่าที่จะเพิ่มในแนวตั้ง (Y) พิกัด | เล่น " |