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