ผ้าใบ HTML แปล ()วิธี การ
ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้าในตำแหน่ง (10,10) ตั้งค่าตำแหน่งใหม่ (0,0) เป็น (70,70) วาดสี่เหลี่ยมเดิมอีกครั้ง (สังเกตว่าตอนนี้สี่เหลี่ยมผืนผ้าเริ่มต้นในตำแหน่ง (80,80):
จาวาสคริปต์:
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);
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| translate() | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
วิธี translate() จะทำการรีแมปตำแหน่ง (0,0) บนผืนผ้าใบ
หมายเหตุ:เมื่อคุณเรียกใช้เมธอด เช่น fillRect() หลังจาก translate() ค่าจะถูกเพิ่มลงในค่าพิกัด x และ y
| ไวยากรณ์ JavaScript: | บริบท .translate ( x, y ); |
|---|
ค่าพารามิเตอร์
หมายเหตุ:คุณสามารถระบุพารามิเตอร์หนึ่งหรือทั้งสองพารามิเตอร์
| Parameter | Description | Play it |
|---|---|---|
| x | The value to add to horizontal (x) coordinates | |
| y | The value to add to vertical (y) coordinates |
❮ อ้างอิงผ้าใบ HTML