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 回答