0

回答这个问题有没有办法在 CSS 中创建画布元素的 3D 圆柱体?,我玩弄了新的CSS 自定义过滤器,试图将它们应用于画布元素。

它有效,但前提是满足某些我不理解的条件。它们似乎与画布的和属性定义的表面相关联。我一开始以为这都是关于 CSS 绘画和画布绘画之间的性能或干扰,但我做的一些实验似乎证明了这些理论是错误的。.height.width

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

以下是我使用演示所做的一些观察:

  • 如果( .heightx .width< 65760px)
    • 没问题,无论我们对画布做什么,都会应用过滤器。
  • 如果( .heightx .width> 65760px)
    • 如果我们每帧都在画布上绘制,过滤器似乎不再适用。
    • 实际上,即使我们只画一次,它也行不通。
    • 但是如果我们将画布保持空白/清除,那么一切都会正常工作(好吧,我们因此只是将过滤器应用于透明的 DOM 元素)
  • 画布的 CSS 大小 ( canvas { width: ...; height: ...}) 似乎不会影响它,过滤器的顶点数也不会影响它。

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

有什么解释吗?

提前致谢!

再见

4

1 回答 1

2

编辑:CSS 自定义过滤器已从所有主要浏览器中删除,并且没有未来开发计划。

老答案:

Chromium 中的 CSS 自定义过滤器实现还不支持加速层(例如视频、加速画布)。该功能仍在经历大量的发展和变化。

在您的示例中,画布似乎是您提到的尺寸以下的非加速层。在这种情况下,自定义过滤器在图层上正确应用。

当画布超过一定大小时,浏览器会将其提升为加速层,并且自定义过滤器尚不适用于加速层。

在 Chrome Canary 中,打开 about:flags 中的“合成渲染层边框”标志,当您向上移动大小滑块时,您可以看到 Canvas 被提升为加速层。

于 2013-05-17T20:54:00.650 回答