วงกลม Canvas HTML
- หน้าก่อน สี่เหลี่ยมผืนผ้า Canvas
- หน้าต่อไป เส้นโค้ง Canvas
ตัวอย่าง
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
วาดวงกลม
เพื่อวาดวงกลมบนหน้ากราฟิก โปรดใช้วิธีต่อไปนี้:
- beginPath() - เริ่มเส้นทาง
- arc(x,y,r,start,end) - กำหนดวงกลม
- stroke() - วาด
arc(x,y,r,start,end) - สร้างทางลาด (เส้นโค้ง)。
เพื่อที่จะสร้างวงกลม โปรดตั้งแงวกำเนิดให้เป็น 0 และแงวสิ้นสุดให้เป็น 2 * Math.PI。
x และ y ประกาศตำแหน่งจุดศูนย์รองรับวงกลม。
ระยะทาง r กำหนดเส้นรอบวง
ดูเพิ่มเติมที่
- หน้าก่อน สี่เหลี่ยมผืนผ้า Canvas
- หน้าต่อไป เส้นโค้ง Canvas
