回答这个问题有没有办法在 CSS 中创建画布元素的 3D 圆柱体?,我玩弄了新的CSS 自定义过滤器,试图将它们应用于画布元素。
它有效,但前提是满足某些我不理解的条件。它们似乎与画布的和属性定义的表面相关联。我一开始以为这都是关于 CSS 绘画和画布绘画之间的性能或干扰,但我做的一些实验似乎证明了这些理论是错误的。.height
.width
我制作了一个jsFiddle来说明这种行为(将鼠标悬停在画布上方以对其进行动画处理 - 确保您的浏览器中提供了自定义过滤器)。
以下是我使用演示所做的一些观察:
- 如果(
.height
x.width
< 65760px)- 没问题,无论我们对画布做什么,都会应用过滤器。
- 如果(
.height
x.width
> 65760px)- 如果我们每帧都在画布上绘制,过滤器似乎不再适用。
- 实际上,即使我们只画一次,它也行不通。
- 但是如果我们将画布保持空白/清除,那么一切都会正常工作(好吧,我们因此只是将过滤器应用于透明的 DOM 元素)。
- 画布的 CSS 大小 (
canvas { width: ...; height: ...}
) 似乎不会影响它,过滤器的顶点数也不会影响它。
我还无法检查65760px的值在不同的 PC 上是否相同在 2 台不同的计算机上尝试并获得相同的行为/限制。我使用 Chrome 金丝雀。
有什么解释吗?
提前致谢!
再见