ตำแหน่ง Canvas HTML
- หน้าก่อน การวาด Canvas
- หน้าต่อไป เส้น Canvas
ตำแหน่งกระดานวาด
HTML กระดานวาดเป็นแนวเวอร์ติคัลและแนวนอร์ทท์เวสต์.
ตำแหน่งบนมุมบนซ้ายของกระดานวาดคือ (0,0).
ในบทที่ผ่านมา เราใช้วิธี: fillRect(0,0,150,75).
หมายความว่า วาดกลมสี่เหลี่ยมผืนผันขนาด 150x75 พิกเซลจากมุมบนซ้ายของจุด (0,0).
ตัวอย่างตำแหน่ง
หยุดเครื่องข่ายเมาส์ที่กล่องกลมด้านล่าง เพื่อดูตำแหน่ง x และ y:
วาดสาย
เพื่อวาดสายตรงของกระดานวาด ใช้วิธีต่อไปนี้:
- moveTo(x,y) - กำหนดจุดเริ่มต้นของสาย
- lineTo(x,y) - กำหนดจุดสิ้นสุดของสาย
เพื่อวาดสายที่จริงๆ คุณต้องใช้วิธีหนึ่งของ "สี" เช่น stroke().
ตัวอย่าง
กำหนดจุดเริ่มต้นที่ตำแหน่ง (0,0) และจุดสิ้นสุดที่ตำแหน่ง (200,100) แล้วใช้วิธี stroke() ที่จริงๆ วาดสาย:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
วาดวงกลม
เพื่อวาดวงกลมบนกระดานวาด ใช้วิธีต่อไปนี้:
- beginPath() - เริ่มต้นทาง
- arc(x,y,r,startangle,endangle) - สร้างทางแบบวงกลม/เส้นโค้ง
เพื่อใช้ arc() ที่จริงๆ ทำวงกลม: ตั้งมาตรามุมเริ่มต้นเป็น 0 และมาตรามุมสิ้นสุดเป็น 2 * Math.PI ค่า x และ y นำเสนอตำแหน่งจุดกลมของ x และ y ค่า r นำเสนอรัศมีของวงกลม.
ตัวอย่าง
ใช้กำหนดวงกลมด้วยหน่วยงาน arc() แล้วใช้วิธี stroke() ที่จริงๆ วาดวงกลม:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
ดูเพิ่มเติมที่
- หน้าก่อน การวาด Canvas
- หน้าต่อไป เส้น Canvas
