คุณสมบัติ fillStyle ของ HTML Canvas: ตั้งค่าสี/กรีเดียน/แพทเทิร์นสำหรับการทา

ไวยากรณ์ (Syntax)

ctx.fillStyle = color | gradient | pattern;

ประเภทค่าที่รองรับ

ตัวอย่าง: Linear Gradient

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="500" height="350" style="border:2px solid orange;"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    // สร้าง Linear Gradient จากซ้ายไปขวา
    var gradient = ctx.createLinearGradient(0, 0, 130, 0);
    gradient.addColorStop(0, "blue");     // 0% = สีน้ำเงิน
    gradient.addColorStop(0.8, "green");  // 80% = สีเขียว
    gradient.addColorStop(1, "yellow");   // 100% = สีเหลือง
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 500, 350);  // ทาสีเต็ม Canvas
  </script>
</body>
</html>

ตัวอย่าง: Pattern (รูปภาพซ้ำ)

var img = new Image();
img.src = "pattern.png";
img.onload = function() {
  var pattern = ctx.createPattern(img, "repeat"); // repeat, repeat-x, repeat-y, no-repeat
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 300, 200);
};

จุดสำคัญ

• fillStyle ส่งผลต่อ fill(), fillRect(), fillText() ที่เรียกหลังจากตั้งค่า
• Gradient ต้องสร้างด้วย createLinearGradient(x0,y0,x1,y1) หรือ createRadialGradient(x0,y0,r0,x1,y1,r1)
• addColorStop(offset, color) offset = 0.0 ถึง 1.0
• Pattern ใช้รูปภาพ <img>, <canvas>, หรือ <video>