เมธอด arc() ใช้สร้างวงกลมใน HTML5 Canvas สำหรับวงกลมสมบูรณ์ ใช้มุมเริ่มต้น 0 และมุมสิ้นสุด 2*Math.PI
พารามิเตอร์ของ arc()
| ลำดับ | พารามิเตอร์ | คำอธิบาย |
|---|---|---|
| 1 | x | พิกัด x ของจุดศูนย์กลาง |
| 2 | y | พิกัด y ของจุดศูนย์กลาง |
| 3 | r | รัศมีของวงกลม |
| 4 | startingAngle | มุมเริ่มต้น (เรเดียน) |
| 5 | endingAngle | มุมสิ้นสุด (เรเดียน) |
| 6 | counterclockwise | true = วาดทวนเข็มนาฬิกา, false = ตามเข็มนาฬิกา (ค่าเริ่มต้น) |
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>HTML Canvas</title> <head> <body> <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas> <script> var c = document.getElementById("newCanvas"); var ctxt = c.getContext("2d"); ctxt.beginPath(); ctxt.arc(100,75,50,0,2*Math.PI); ctxt.stroke(); </script> </body> </html>
ขั้นตอนสำคัญ: 1) beginPath() เริ่มเส้นทางใหม่ 2) arc() กำหนดวงกลม 3) stroke() หรือ fill() เพื่อวาดจริง
