Thuộc tính fillStyle của Canvas HTML

Giới thiệu

Thuộc tính fillStyle của HTML Canvas thiết lập màu, gradient (chuyển màu) hoặc pattern (mẫu) dùng cho các phép tô (fill). Mặc định là #000000 (đen).

Cú pháp

ctx.fillStyle = color | gradient | pattern;

• color: Màu CSS (tên, hex, rgb, hsl...).
• gradient: Đối tượng gradient tuyến tính (createLinearGradient) hoặc شعاعية (createRadialGradient).
• pattern: Đối tượng pattern (createPattern).

Ví dụ minh họa (Linear Gradient)

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, 130, 0);
    gradient.addColorStop(0, "blue");
    gradient.addColorStop(0.8, "green");
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 500, 350);
  </script>
</body>
</html>

Kết quả hiển thị

Canvas được tô bằng gradient tuyến tính từ xanh dương sang xanh lá.