主動鏡像部分屏幕的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反射將被硬件加速，它可以開箱即用，並且當瀏覽器完全支持它時，它將非常流暢。

在我看來，畫布的方法是矯枉過正。