CanvasRenderingContext2D.shadowBlur的单位是什么？
What are the units of CanvasRenderingContext2D.shadowBlur?
CanvasRenderingContext2D.shadowBlur 属性 的 MDN documentation 表示
this value doesn't correspond to a number of pixels
其他一些文章指出它确实以像素为单位，但我发现 MDN 文档是正确的。这是一个带有 alpha 通道的 PNG，渲染在 canvas 上，shadowBlur 设置为 15:
这里是渲染为 img 元素的同一图像，其中 -webkit-filter: drop-shadow() 的 blur-radius 值设置为 15px：
很明显 canvas 模糊不是以像素为单位，除非 Retina、缩放级别或其他我现在还不完全理解的东西发生了古怪的事情。
如果我将 drop-shadow() 上的 blur-radius 降低到 5px，但是，它与 canvas:
非常接近
那么 blur-radius 是否应该始终设置为 shadowBlur 的三分之一以实现奇偶校验？有人可以帮助我了解这里发生了什么吗？
问题
您所说的没有定义的单位，canvas 的阴影模糊实现方式各不相同：
- 目前 Firefox
shadowBlur 是 CSS 模糊半径的 1/2。
- 目前 Chrome
shadowBlur 是 CSS 模糊半径的 1/4。
虽然部分原因是阴影在内部合成的方式。 Fire fox 使用 source-over，Chrome 不使用（你需要额外加倍补偿）。
查看现有报告很明显这是一个已知问题，也许更多是在非技术方面。例如，从 this issue 的评论中我们可以读到：
The W3C canvas spec seems stale. The note in question was removed in
September 2014 from HTML: https://html5.org/r/8813
If you want to get rid of shadows in these other modes, opening a new
spec bug at https://whatwg.org/newbug might be a good start.
并且在next comment（我强调）：
#11 - currently Chrome complies the spec but Firefox draws a shadow as source-over as noticed. It's why two browsers show fundamental
difference.
btw, I agree on shadow composition by only source-over. Currently
shadow processing model is not too intuitive to understand for web
developer.
所以总而言之，我想我们只能坐等 W3C 和供应商解决这个问题并就相同的方法达成一致。
如果您在 Firefox 中使用 2x，在 Chrome 中使用 4x，如果这个问题得到修复，那么将来阴影当然会“破裂”。
解决方案
目前可能的解决方法似乎是将阴影嵌入图像本身，或者单独为阴影生成单独的图像，然后手动合成。
CanvasRenderingContext2D.shadowBlur 属性 的 MDN documentation 表示
this value doesn't correspond to a number of pixels
其他一些文章指出它确实以像素为单位，但我发现 MDN 文档是正确的。这是一个带有 alpha 通道的 PNG，渲染在 canvas 上，shadowBlur 设置为 15:
这里是渲染为 img 元素的同一图像，其中 -webkit-filter: drop-shadow() 的 blur-radius 值设置为 15px：
很明显 canvas 模糊不是以像素为单位，除非 Retina、缩放级别或其他我现在还不完全理解的东西发生了古怪的事情。
如果我将 drop-shadow() 上的 blur-radius 降低到 5px，但是，它与 canvas:
那么 blur-radius 是否应该始终设置为 shadowBlur 的三分之一以实现奇偶校验？有人可以帮助我了解这里发生了什么吗？
问题
您所说的没有定义的单位，canvas 的阴影模糊实现方式各不相同：
- 目前 Firefox
shadowBlur是 CSS 模糊半径的 1/2。 - 目前 Chrome
shadowBlur是 CSS 模糊半径的 1/4。
虽然部分原因是阴影在内部合成的方式。 Fire fox 使用 source-over，Chrome 不使用（你需要额外加倍补偿）。
查看现有报告很明显这是一个已知问题，也许更多是在非技术方面。例如，从 this issue 的评论中我们可以读到：
The W3C canvas spec seems stale. The note in question was removed in September 2014 from HTML: https://html5.org/r/8813
If you want to get rid of shadows in these other modes, opening a new spec bug at https://whatwg.org/newbug might be a good start.
并且在next comment（我强调）：
#11 - currently Chrome complies the spec but Firefox draws a shadow as source-over as noticed. It's why two browsers show fundamental difference.
btw, I agree on shadow composition by only source-over. Currently shadow processing model is not too intuitive to understand for web developer.
所以总而言之，我想我们只能坐等 W3C 和供应商解决这个问题并就相同的方法达成一致。
如果您在 Firefox 中使用 2x，在 Chrome 中使用 4x，如果这个问题得到修复，那么将来阴影当然会“破裂”。
解决方案
目前可能的解决方法似乎是将阴影嵌入图像本身，或者单独为阴影生成单独的图像，然后手动合成。