CanvasRenderingContext2D.shadowBlur有哪些单位？

Question

CanvasRenderingContext2D.shadowBlur属性的MDN documentation表示

  

此值与多个像素

不对应

其他一些文章表明它确实以像素为单位，但我发现MDN文档是正确的。这是一个带有alpha通道的PNG，在shadowBlur设置为15的画布上呈现：

这是与img元素呈现的相同图像，-webkit-filter: drop-shadow()的{​​{1}}值设置为15px：

似乎很明显画布模糊不是以像素为单位，除非Retina或缩放级别或其他我现在还没有完全理解的东西有些古怪。

如果我将blur-radius上的blur-radius降低到5px，那么它与画布的匹配非常接近：

那么drop-shadow()是否应始终设置为blur-radius的三分之一以实现平价？有人能帮我理解这里发生了什么吗？

Answer 1

问题

您所声明的没有已定义的单位，并且对画布实施阴影模糊的方式各不相同：

• 目前，Firefox shadowBlur是CSS blur-radius的1/2。
• 目前，Chrome shadowBlur是CSS blur-radius的1/4。

虽然部分原因是阴影是如何在内部合成的。 Fire fox使用source-over，Chrome没有（你需要额外加倍补偿）。

从现有报告来看，很明显这是一个已知问题，也许更多是非技术方面的问题。例如，根据this issue上的评论，我们可以阅读：

  

W3C画布规格看似陈旧。有关的说明已删除   2014年9月来自HTML：https://html5.org/r/8813

     

如果你想在这些其他模式中摆脱阴影，请打开一个新的   https://whatwg.org/newbug的规范错误可能是一个好的开始。

和next comment（我的重点）：

  

＃11 - 目前Chrome符合规范，但Firefox会像引起注意的那样吸引影子作为源代码。这就是两个浏览器显示基础的原因   差。

     不过，我同意只有来源的阴影构图。目前   阴影处理模型对于网络来说不是太直观   显影剂。

总而言之，我想我们必须等待，直到W3C和供应商能够解决这个问题并同意相同的方法。

如果你使用2x for Firefox和4x for Chrome，那么如果这个问题得到解决，阴影当然会“破裂”。

解决方案

目前可能的解决方法似乎是将阴影嵌入图像本身，或者仅为阴影生成单独的图像，然后手动合成。