0

在一个涉及玻璃码头反射的照片网站上工作。它很光滑。

我不想使用 CSS3 的 box-reflect 属性，而是想在文档中构建一个画布层，它可以简单地翻转其上方的任何内容并具有渐变蒙版。有几个原因：

  • 浏览器兼容性（Chrome 有一个 box-reflect 错误，这让我很生气）
  • 吹毛求疵的人工物理……当越过码头边缘时，我只想要码头上的倒影

我在网上环顾四周，看到了很多插件资源，这些插件为你运行的每个图像构建了一个画布元素——但这些都不适合我。

理想情况下，我有一些 jQuery 可以复制停靠栏上方区域中的所有像素并将其翻转过来，然后在我将预定义的一些事件上运行（例如每当幻灯片中的图像移入时）。

有人看过这方面的资源吗？我疯了，错过了更好的方法吗？谢谢你的帮助！

这是一个小眼睛糖果的屏幕截图。页面上除图像外的所有内容都是 CSS。

http://cloud.dhut.ch/image/0F1i2T0p3i3M

4

1 回答 1

0

如果您想考虑移动支持，我建议您坚持使用 CSS 属性，因为它们比画布绘图更好。另一方面，如果您想支持浏览器，您可以使用画布创建反射。

画布解决方案很难。时期。从一个或一系列图像中进行反射没有捷径可走。以下是我将采取的制作画布反射的基本步骤。

  1. 遍历您在给定时间显示的所有图像。
  2. 在隐藏的画布上绘制每个图像。
  3. 在同一基线绘制所有图像后，从整个画布中获取图像数据。
  4. 使用 simple for 对像素进行迭代来迭代和翻转图像数据。
  5. 对于从顶部开始的图像数据的每个像素行，通过将每个像素的 alpha 值更改一个度数来降低不透明度。这将创建渐变淡出效果。
  6. 将图像数据放入反射画布中。

每次从场景中更改一张图像时，都需要重新绘制它。每次移动时（如果有滚动条），您必须更新反射。

从性能的角度来看，这确实很昂贵。

拥有 css 反射将是硬件加速的，它会开箱即用，当浏览器完全支持它时，它会非常流畅。

在我看来，画布方法是矫枉过正的。

于 2012-10-09T12:11:45.353 回答