主动镜像部分屏幕的jQuery和HTML5画布

Question

在涉及玻璃底座反射的照片网站上工作。这很漂亮。

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

• 浏览器兼容性（浏览器具有盒反映错误，杀了我）
• 吹毛求疵人工物理...当过码头的边缘，我只想要反思码头

我已经在网上看了一圈，看到了很多插件的资源，这些插件为您运行的每个图像都构建了一个画布元素 - 但这些插件都不适合我。在理想情况下，我有一些jQuery可以复制码头上方区域的所有像素，并翻转它，然后运行一些我将预定义的事件（例如幻灯片中的图像被移入时）。

有没有人看过这个资源？我是否疯了，错过了更好的方式？谢谢你的帮助！

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

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

Answer 1

如果您要考虑移动的支持，我建议你还是坚持使用CSS属性，因为他们会比画布绘制好。另一方面，如果您想支持浏览器，则可以使用画布创建反射。

画布解决方案很难。期。从一个或一系列图像中反射出来没有任何捷径。以下是我将用来制作画布反射的基本步骤。

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

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

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

由于css反射将被硬件加速，它可以开箱即用，并且当浏览器完全支持它时，它将非常流畅。

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