HTML ผ้าใบพิกัด

ผ้าใบพิกัด

ผ้าใบ HTML เป็นตารางสองมิติ

ที่มุมบนซ้ายของผ้าใบมีพิกัด (0,0)

ในบทก่อนหน้านี้คุณเห็นวิธีการนี้ใช้ fillRect(0,0,150,75)

ซึ่งหมายความว่าเริ่มต้นที่มุมบนซ้าย (0,0) และวาดรูปสี่เหลี่ยมผืนผ้า 150x75 พิกเซล

เลื่อนเมาส์ไปที่รูปสี่เหลี่ยมด้านล่างเพื่อดู x และ y พิกัดของมัน

การวาดเส้นตรงบนผืนผ้าใบใช้วิธีการต่อไปนี้:

ที่จริงการวาดเส้นคุณต้องใช้อย่างใดอย่างหนึ่งของ "ink" วิธีการเช่น 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();

การวาดวงกลมบนผืนผ้าใบใช้วิธีการต่อไปนี้:

beginPath() - เริ่มต้นเส้นทาง
arc(x,y,r,startangle,endangle) - สร้างโค้ง / เส้นโค้ง เพื่อสร้างวงกลมที่มี arc() : ตั้งมุมเริ่มต้นที่ 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();