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

Giới thiệu

Thuộc tính shadowBlur của HTML Canvas thiết lập độ mờ (blur level) cho bóng đổ của hình vẽ. Giá trị mặc định là 0 (không mờ, bóng sắc nét). Càng lớn càng mờ. Kết hợp với shadowColor, shadowOffsetX, shadowOffsetY.

Cú pháp

ctx.shadowBlur = so_luong;

Ví dụ minh họa

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    // Hình 1: bóng xám mờ 20
    ctx.shadowBlur = 20;
    ctx.shadowColor = "black";
    ctx.fillStyle = "green";
    ctx.fillRect(40, 40, 100, 250);
    // Hình 2: bóng xanh mờ 30
    ctx.shadowBlur = 30;
    ctx.shadowColor = "blue";
    ctx.fillStyle = "orange";
    ctx.fillRect(200, 40, 200, 150);
  </script>
</body>
</html>

Kết quả hiển thị

Hai hình chữ nhật với bóng đổ khác màu và độ mờ.