การวาดเส้นผ่าน canvas บน JavaScript
เริ่มจากสิ่งง่ายๆ - การวาดเส้น ในการทำความเข้าใจว่าทำได้อย่างไร ลองนึกภาพว่าคุณมีกระดาษหนึ่งแผ่นและดินสอหนึ่งแท่ง คุณสามารถ วาดบนแผ่นกระดาษนั้น หรือเพียงแค่เลื่อนปลายดินสอไปยังจุดที่ต้องการโดยไม่ต้องวาด
JavaScript ทำงานในลักษณะเดียวกัน: มันมี "ดินสอ" (หรือปากกาสำหรับวาด)
คุณสามารถเลื่อนมันไปยังตำแหน่งที่ต้องการได้ด้วยเมธอด
moveTo และวาดด้วยเมธอด
lineTo
เมธอดทั้งสองรับพารามิเตอร์เป็นจุดที่จะเลื่อนปลายปากกาไป - พารามิเตอร์แรก
คือพิกัดแนวนอน และพารามิเตอร์ที่สองคือพิกัดแนวตั้ง จุดเริ่มต้นของพิกัดคือจุด
0,
0 ซึ่งคือมุมบนซ้ายขององค์ประกอบ
เมื่อปากกาเลื่อนไปยังจุดที่ต้องการ - เมธอด
moveTo ก็เพียงแค่เลื่อน ในขณะที่
lineTo ในระหว่างการเลื่อนจะวาด
เส้นจากตำแหน่งปัจจุบันของปากกาจนถึงจุด
ที่มันจะเลื่อนไป
อย่างไรก็ตาม หากรันโค้ดด้านบน
- จะไม่มีอะไรเกิดขึ้น: จำเป็นต้องเขียน
คำสั่งเพิ่มอีกสองคำสั่ง: คำสั่งแรก
beginPath
ควรระบุก่อนเริ่มวาดเส้น
และคำสั่งที่สอง
stroke ควร
ถูกเรียกหลังจากชุดคำสั่ง
moveTo และ
lineTo ทั้งหมด เพื่อให้เส้นปรากฏขึ้น
ดังนั้น มาลองเขียนโค้ดที่ใช้งานได้สำหรับการวาดเส้น:
มาวาดเส้นกัน
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
Результат:
มาวาดนกน้อยกัน
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
Результат:
มาวาดรูปสามเหลี่ยมกัน
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
Результат:
มาวาดรูปสี่เหลี่ยมจัตุรัสกัน
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
Результат:
การปิดรูปทรง
สำหรับการวาดรูปทรงปิด ไม่จำเป็นต้อง
วาดเส้นทั้งหมด - เส้นสุดท้ายสามารถ
วาดขึ้นโดยอัตโนมัติและปิดรูปทรงได้
สำหรับการทำเช่นนี้ ก่อนเมธอด
stroke ควร
เรียกเมธอด
closePath
เมธอดนี้พยายามปิดรูปทรงโดยการวาด เส้นตรงจากจุดสิ้นสุดไปยังจุดเริ่มต้น หากรูปทรงถูกปิดแล้วหรือเป็นเพียงแค่จุด เมธอดนี้จะไม่ทำอะไร
มาลองวาดสามเหลี่ยมโดยใช้
closePath:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - ข้ามขั้นตอนนี้
ctx.closePath();
ctx.stroke();
Результат:
การเติมสีรูปทรง
แทนที่เมธอด
stroke สามารถใช้
เมธอด
fill ได้ - ในกรณีนี้รูปทรงไม่จำเป็น
ต้องถูกปิดสนิท - มันจะถูกเติมสี
ได้เช่นกัน:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - ข้ามขั้นตอนนี้
//ctx.closePath(); - และขั้นตอนนี้ด้วย
ctx.fill();
Результат: