context.shadowBlur的定义是什么？它与lineWidth是否存在关联？

嘿，我来帮你搞明白ctx.shadowBlur的定义，还有它和lineWidth的关联~

shadowBlur是Canvas 2D绘图上下文的核心属性之一，专门用来控制阴影的模糊程度：

• 它的取值是非负数字，数值越大，阴影的模糊扩散范围就越广，视觉上越朦胧；数值为0时，阴影是清晰的硬边效果。
• 注意哦，这个值没有单位，不是像素，是一个描述模糊半径的参数，浏览器会根据这个值计算模糊的强度。
• 要让阴影正常显示，还得配合shadowColor设置阴影的颜色，不然光有shadowBlur也看不到效果。

shadowBlur本身和lineWidth没有直接的绑定逻辑，但两者会共同影响最终的渲染视觉效果，尤其是在绘制描边图形的时候：

• lineWidth控制描边线条的粗细，而阴影是跟随图形的描边（或填充）轮廓生成的。如果描边越粗，阴影生成的“基底轮廓”就越大，再叠加shadowBlur的模糊效果，整体看起来阴影会更厚重、范围更广；反之，细描边的阴影会显得更“单薄”。

拿你给出的代码例子来说（我补全了缺失的标签部分）：

<canvas id="myCanvas1" width="200" height="200"></canvas>
<canvas id="myCanvas2" width="200" height="200"></canvas>
<script>
// 第一个画布：默认lineWidth=1
var c=document.getElementById("myCanvas1");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.strokeStyle="red";
ctx.strokeRect(20,20,100,80);

// 第二个画布：lineWidth=5
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.lineWidth=5;
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.strokeStyle="blue";
ctx.strokeRect(20,20,100,80);
</script>

• 第一个矩形用默认的1px描边，阴影是基于1px粗细的轮廓模糊出来的，视觉上阴影比较“细”；
• 第二个矩形用5px粗描边，阴影基于5px的轮廓模糊，所以看起来阴影的“基础范围”更大，加上同样的20值模糊，最终阴影效果会比第一个更强烈。

总结一下：shadowBlur管阴影的模糊程度，lineWidth管描边的粗细，后者决定了阴影生成的轮廓大小，所以两者搭配会让阴影的视觉表现不同，但shadowBlur的定义本身和lineWidth没有直接依赖关系~

内容的提问来源于stack exchange，提问作者wutzebaer