CSS3自定义过滤器仅在满足奇怪条件时工作

Question

是否有办法在CSS中创建canvas元素的3D圆柱体?，我玩了新的CSS自定义过滤器，试图将应用到画布元素。

它工作，但只有当一些我不理解的条件被满足。它们似乎与画布的.height和.width属性定义的表面有关。我一开始以为这都是CSS绘画和画布绘画之间的性能或干扰，但我做的一些实验似乎证明这些理论是错误的。

我制作了一个jsFiddle来说明这种行为(将鼠标悬停在画布上方以使其动画化-确保您的浏览器中可以使用自定义过滤器)。

下面是我使用演示程序所做的一些观察:

• If (.height x .width <65760 px)
  • 没有问题，滤镜被应用，无论我们对画布做什么。
• If (.height x .width> 65760px)
  • 过滤器似乎不再适用，如果我们继续在画布上绘制每一帧。
  • 实际上，即使我们只画一次，它也不会工作。
  • 但是如果我们保持画布空白/清除，那么一切都可以正常工作(好吧，我们这样简单地应用一个过滤器到一个透明的DOM元素)。
• 画布的CSS大小(canvas { width: ...; height: ...})似乎不影响它，也不为过滤器顶点的数量。

我还没能检查65760px的值在不同的PC上是否相同在2台不同的计算机上尝试并得到相同的行为/限制。我用Chrome金丝雀。

解释吗?

提前感谢!

再见

Answer 1

EDIT: CSS自定义过滤器已经从所有主流浏览器中删除，并且没有未来开发的计划。

老回答:

chrome中的CSS自定义过滤器实现还不支持加速层(例如video, accelerated canvas)。该功能仍在经历大量的开发和变化。

在您的示例中，画布似乎是一个小于您提到的大小的非加速层。在这种情况下，自定义滤镜正确地应用在图层上。

当画布超过一定大小时，浏览器会将其提升为加速层，而自定义过滤器还不能在加速层上工作。

在Chrome金丝雀中，在about:flags中打开"合成渲染层边界"标志，当你移动尺寸滑块时，你可以看到画布被提升为加速层。