ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้าอยู่ในตำแหน่ง (10,10) , ตั้งค่าใหม่ (0,0) ตำแหน่งที่ (70,70) วาดรูปสี่เหลี่ยมเดิมอีกครั้ง (notice that the rectangle now starts in position (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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ความหมายและการใช้งาน
translate() วิธี remaps (0,0) ตำแหน่งบนผืนผ้าใบ
Note: เมื่อคุณเรียกวิธีการเช่น fillRect() หลังจาก translate() ค่าที่ถูกเพิ่มเข้าไปในแกน X และ Y ค่าพิกัด
แปล () วิธีการ "/> | ไวยากรณ์ JavaScript: | context translate( x,y ) ; |
|---|
ค่าพารามิเตอร์
Note: คุณสามารถระบุหนึ่งหรือทั้งสองพารามิเตอร์
| พารามิเตอร์ | ลักษณะ | เล่น |
|---|---|---|
| x | ค่าที่จะเพิ่มในแนวนอน (x) พิกัด | เล่น " |
| y | ค่าที่จะเพิ่มในแนวตั้ง (y) พิกัด | เล่น " |
<ผ้าใบวัตถุ