เมธอด fill() ของ HTML Canvas: ทาสีพื้นที่เส้นทางปัจจุบัน

ไวยากรณ์ (Syntax)

ctx.fill();

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="450" height="250" style="border:2px solid blue;">
    เบราวเซอร์ไม่รองรับ HTML5 Canvas
  </canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    ctx.beginPath();
    ctx.rect(50, 60, 300, 200);  // สร้างเส้นทางสี่เหลี่ยม
    ctx.fillStyle = "green";     // ตั้งสีทาเป็นสีเขียว
    ctx.fill();                  // ทาสีภายในเส้นทาง
  </script>
</body>
</html>

ผลลัพธ์

จะเห็นสี่เหลี่ยมสีเขียว ขนาด 300x200 พิกเซล ตำแหน่ง (50, 60) บน Canvas

ขั้นตอนการวาดและทาสี

1. beginPath() - เริ่มเส้นทางใหม่
2. rect(), arc(), moveTo()/lineTo() - สร้างรูปร่าง
3. fillStyle - ตั้งค่าสี/กรีเดียน/แพทเทิร์นสำหรับทา
4. fill() - ทาสีภายในเส้นทางที่สร้างไว้

เมธอดที่เกี่ยวข้อง

• stroke() - วาดขอบเส้นทาง (ไม่ทาภายใน)
• fillRect() - สร้างและทาสีสี่เหลี่ยมในคำสั่งเดียว
• fillStyle - คุณสมบัติตั้งค่ารูปแบบการทา (สี กรีเดียน แพทเทิร์น)