htmlcanvasshadowblur属性

HTML canvas 的 shadowBlur 属性是一个用于设置阴影模糊效果的属性。当我们在 canvas 上绘制对象时，可以使用 shadowBlur 属性来设置阴影的模糊程度，从而为绘制的对象增加立体感和深度感。

shadowBlur 属性接受一个数字作为参数，用于表示阴影的模糊程度。这个数字越大，阴影越模糊，越小则越清晰。属性的默认值是0，表示无模糊。下面是一个使用 shadowBlur 属性来设置阴影模糊效果的例子：

```

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.shadowBlur = 10;

ctx.shadowColor = "black";

ctx.fillRect(20

20

150

100);

```

在这个例子中，我们创建了一个 canvas 元素，获取它的绘制上下文对象 ctx，并使用 fillRect 方法在 canvas 上绘制了一个矩形。在绘制之前，我们先设置了 shadowBlur 属性为10，表示阴影的模糊程度为10个像素。我们还设置了 shadowColor 属性为 "black"，表示阴影的颜色为黑色。***，调用 fillRect 方法绘制矩形，即可看到具有模糊阴影效果的矩形。

在实际应用中，我们可以根据具体的需求和设计效果来决定阴影的模糊程度。比如，在绘制一个按钮时，我们可以使用模糊阴影来增加按钮的立体感，使其看起来像是凸出在画布上。同时，我们还可以利用该属性来实现一些视觉效果，比如光晕、发光等。

需要注意的是，shadowBlur 属性只影响阴影的模糊程度，并不影响阴影的大小和透明度。阴影的大小由阴影的偏移量 shadowOffsetX 和 shadowOffsetY 决定，而阴影的透明度由 shadowColor 属性指定的颜色的透明度决定。如果要调整阴影的大小和透明度，可以分别设置 shadowOffsetX、shadowOffsetY 和 shadowColor 属性的值。

另外，需要注意的是，shadowBlur 属性只对绘制的对象有效，不会影响到绘制上下文的其他部分。也就是说，如果想要给多个绘制对象添加阴影，需要在每个对象绘制之前分别设置 shadowBlur 属性。

总结来说，HTML canvas 的 shadowBlur 属性是一个用于设置阴影模糊效果的属性，可以通过设置一个数字来调整阴影的模糊程度。该属性可以为绘制的对象增加立体感和深度感，同时也可以用来实现一些视觉效果。需要注意的是，shadowBlur 属性只影响阴影的模糊程度，而阴影的大小和透明度由其他属性决定。在绘制多个对象时，需要分别设置 shadowBlur 属性。