รูปทรง Canvas HTML

ตัวอย่าง

ตัวอย่าง 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

ctx.stroke();

วาดสาย Canvas

วาดสายใช้เส้นทางในกระดาน

วิธีเรียกใช้

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

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

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

stroke() วิธีเรียกใช้แท้จริงแล้ววาดสาย

ตัวอย่างเพิ่มเติม

ตัวอย่าง 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

ctx.stroke();

ตัวอย่าง 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

ctx.stroke();

คำเตือน

ถ้าคุณต้องการวาดสี่เหลี่ยม คุณไม่จำเป็นต้องวาดสาย 4 สาย

ในบทที่ต่อไปคุณจะเรียนการใช้ drawRect() มีวิธีเรียกใช้เพื่อวาดสี่เหลี่ยม

strokeStyle โครงสร้าง

strokeStyle โครงสร้างที่กำหนดรูปแบบที่ใช้ในการวาดบนกระดาน

ต้องเรียกใช้ stroke() ต้องตั้งค่ามันก่อนเรียกใช้

ตัวอย่าง

ctx.beginPath();
// กำหนดสี่เหลี่ยม
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// กำหนดสามเหลี่ยม
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

ctx.stroke();

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

ดูเพิ่มเติม