เส้นทางทาง HTML Canvas

ตัวอย่าง

// สร้างแผ่นภาพ
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// กำหนดเส้นทางใหม่
ctx.beginPath();
// กำหนดจุดเริ่มต้น
ctx.moveTo(0, 0);
// กำหนดจุดสิ้นสุด
ctx.lineTo(200, 100);
// วาด
ctx.stroke();

ทดลองด้วยตัวเอง

วาดสายบน Canvas

การวาดสายใช้เส้นทางบนแผ่นภาพ

วิธี

วิธี beginPath() กำหนดเริ่มต้นเส้นทางใหม่

วิธี moveTo() กำหนดจุดเริ่มต้นของสาย

วิธี lineTo() กำหนดจุดสิ้นสุดของสาย

วิธี stroke() วาดสายอย่างที่แท้จริง

lineWidth แฟ้ม

lineWidth แฟ้มกำหนดความกว้างของสายที่ใช้การวาดบนแผ่นภาพ

มันจำเป็นต้องตั้งค่าก่อนที่จะเรียกใช้วิธี stroke()

ตัวอย่าง

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

ทดลองด้วยตัวเอง

strokeStyle แฟ้ม

strokeStyle แฟ้มกำหนดรูปแบบที่ใช้การวาดบนแผ่นภาพ

มันจำเป็นต้องตั้งค่าก่อนที่จะเรียกใช้วิธี stroke()

ตัวอย่าง

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

ทดลองด้วยตัวเอง

lineCap แฟ้ม

lineCap แฟ้มกำหนดรูปแบบของปลายสายสาย (butt, round หรือ square)

โดยเริ่มต้นเป็น square (สี่เหลี่ยม)

มันจำเป็นต้องตั้งค่าก่อนที่จะเรียกใช้วิธี stroke()

ตัวอย่าง

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

ทดลองด้วยตัวเอง

ดูเพิ่มเติมที่

คู่มืออ้างอิงเต็ม Canvas ของ CodeW3C.com