Circle HTML Canvas

ตัวอย่าง

เว็บเบราวเซอร์ของคุณไม่สนับสนุนแท็ก HTML5 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 ที่เต็มที่ของ CodeW3C.com