HTML canvas lineTo() Method
ตัวอย่าง
เริ่มต้นเส้นทาง ย้ายไปที่ตำแหน่ง 0,0 สร้างบรรทัดไปยังตำแหน่ง 300,150:
จาวาสคริปต์:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| lineTo() | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
เมธอด lineTo() เพิ่มจุดใหม่และสร้างเส้น TO ที่จุดนั้นจากจุดที่ระบุล่าสุดในแคนวาส (วิธีนี้ไม่ได้วาดเส้น)
เคล็ดลับ:ใช้วิธีstroke()เพื่อวาดเส้นทางบนผืนผ้าใบจริงๆ
| ไวยากรณ์ JavaScript: | บริบท .lineTo( x,y ); |
|---|
ค่าพารามิเตอร์
| Parameter | Description | Play it |
|---|---|---|
| x | The x-coordinate of where to create the line to | |
| y | The y-coordinate of where to create the line to |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วาดเส้นทางที่มีรูปร่างเป็นตัวอักษร L:
จาวาสคริปต์:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();
❮ อ้างอิงผ้าใบ HTML