HTML |画布 shadowBlur 属性

shadowBlur 属性是 HTML 画布（<canvas>）元素的一种属性，用于指定绘制出的图形的阴影模糊效果。它是一个整数类型的值，表示阴影的模糊半径大小。

语法

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.shadowBlur = 10;

参数

shadowBlur 属性的值是一个整数类型的数值，表示阴影的模糊半径大小。它的默认值是 0，即无阴影效果。

示例

<canvas id="myCanvas"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');

  // 绘制实心圆
  ctx.beginPath();
  ctx.fillStyle = 'blue';
  ctx.arc(50, 50, 40, 0, 2 * Math.PI);
  ctx.fill();

  // 绘制带阴影效果的实心圆
  ctx.beginPath();
  ctx.fillStyle = 'red';
  ctx.shadowColor = '#000';
  ctx.shadowBlur = 20;
  ctx.arc(150, 50, 40, 0, 2 * Math.PI);
  ctx.fill();
</script>

上述示例中，我们使用画布元素的 getContext() 方法获取了画布的 2D 上下文，然后在画布上绘制了两个实心圆，其中第二个圆设置了阴影效果。

注意事项

• shadowBlur 属性值越大，阴影的模糊半径就越大。
• shadowBlur 属性的值必须是非负整数，不能是负数或浮点数。
• 绘制有阴影效果的元素会影响页面性能，因此应尽量少使用阴影效果，以提高页面的渲染性能。