วิธีสร้าง Radial Gradient (คุณลักษณะวงกลม) ใน HTML5 Canvas

ใช้ createRadialGradient() สร้าง gradient แบบรัศมี (Circular/Radial) จากวงกลมหนึ่งไปอีกวงกลมหนึ่ง

Syntax

const gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

Parameter

การเพิ่มสี (Color Stops)

gradient.addColorStop(0, '#FFFFFF');   // 0% - เริ่มต้น
gradient.addColorStop(0.5, '#FFCC00'); // 50% - กลาง
gradient.addColorStop(1, '#66CC00');   // 100% - สิ้นสุด

ตัวอย่างเต็ม

<!DOCTYPE html>
<html>
<body>
  <canvas id="canvas" width="450" height="250" style="border:1px solid #ddd"></canvas>
  <script>
    const c = document.getElementById('canvas');
    const ctx = c.getContext('2d');
    
    // Radial gradient: start circle (75,50,r=5) → end circle (90,60,r=100)
    const grad = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
    grad.addColorStop(0, '#FFFFFF');
    grad.addColorStop(1, '#66CC00');
    
    ctx.fillStyle = grad;
    ctx.fillRect(20, 10, 200, 150);
  </script>
</body>
</html>

กรณีใช้งานทั่วไป

• Progress indicators (circular)
• Lighting effects, glow
• Button backgrounds
• Charts (pie/donut backgrounds)

Linear vs Radial Gradient