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