CanvasRenderingContext2D.shadowBlur 的单位是什么？

Question

CanvasRenderingContext2D.shadowBlur 属性的MDN documentation 表明

此值与像素数不对应

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

这是渲染为 img 元素的同一张图片，-webkit-filter: drop-shadow() 的值设置为 15px：blur-radius：

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

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

那么blur-radius 是否应该始终设置为shadowBlur 的三分之一以实现对等？有人可以帮我理解这里发生了什么吗？

Answer 1

问题

正如您所说，没有定义单位，并且为画布实现阴影模糊的方式各不相同：

• 目前对于 Firefox，shadowBlur 是 CSS 模糊半径的 1/2。
• 目前对于 Chrome，shadowBlur 是 CSS 模糊半径的 1/4。

虽然部分原因是阴影是如何在内部合成的。 Fire fox 使用 source-over，Chrome 不使用（您需要通过额外的加倍来弥补）。

查看现有报告很明显，这是一个已知问题，可能更多是在非技术方面。例如，从this issue 上的 cmets 我们可以阅读：

W3C 画布规范似乎过时了。有问题的笔记已在 2014 年 9 月来自 HTML：https://html5.org/r/8813

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

在next comment（我的重点）中：

#11 - 目前 Chrome 符合规范，但 Firefox 会像注意到的那样在源覆盖上画出阴影。这就是为什么两个浏览器显示基本 区别。

顺便说一句，我同意仅通过源头进行阴影合成。现在 阴影处理模型对于 web 来说不太直观 开发者。

所以总而言之，我想我们只能坐等 W3C 和供应商解决这个问题并就相同的方法达成一致。

如果你在哪里使用 Firefox 的 2x 和 Chrome 的 4x，如果这个问题得到修复，阴影当然会在未来“中断”。

解决方案

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