1. 首頁
  2. 問答
  3. HTML5中可以使用photoshop混合模式嗎？

HTML5中可以使用photoshop混合模式嗎？

2010-11-25 41 views
34

我想在我的網頁上放置一個紅色的長方形<div>元素，以便它看起來不僅透明，而且還像在Photoshop的Multiply模式中混合使用。HTML5中可以使用photoshop混合模式嗎？

<div>將有position: fixed，所以它下面的內容會變化很快。

這有可能與任何HTML5/CSS3 /月/ SVG把戲？

來源

2010-11-25 Ernests Karlsons

回答

27

我已經創建了一個獨立的，輕量級的，開源的庫，用於執行從一個HTML畫布背景的Photoshop風格的混合模式到另一個：context-blender。這裏的示例用法：

// Might be an 'offscreen' canvas 
var over = someCanvas.getContext('2d'); 
var under = anotherCanvas.getContext('2d'); 

over.blendOnto(under, 'screen', {destX:30,destY:15});

更多信息，請參見README，包括當前支持的混合模式。

您可以使用它來從一個帆布乘法執行到另一個，但不超過標準的HTML元素。

來源

2010-12-03 22:53:56 Phrogz

2

這不是HTML5，但它與我所能找到的相近。

Javascript blending modes（OpenGL的）。

我不認爲「混合模式」，如Photoshop可以只用純HTML效仿，除非語言參加了另一個方向的急轉彎。但看到一些更簡單的方法可以很好。

來源

2010-11-25 12:54:52 Kyle

+1

它顯示在畫布上混合已存在的東西。但是，我想我無法將混合應用到BELOW畫布上，因爲這需要畫布捕獲窗口內容，但至少在Firefox中，這是不允許Web應用程序使用的。 – 2010-11-25 16:21:47

1

This is the closest I have seen，是的，所有資產都必須在畫布上。請注意，Internet Explorer在9版本中尚未支持畫布，因此如果您必須支持IE < 9，則必須使用解決方法。

來源

2011-01-20 15:51:53 Luis

+0

是的Pixastic圖書館[http://www.pixastic.com]看起來很酷。感謝您的鏈接。 BTW，IE 9於3月份發佈，現在可能是一種選擇。 – 2011-06-29 04:03:11

2

我對這樣做也很感興趣。我爲視覺設計師編寫的許多佈局都可以使用它。除了此主題中的其他帖子，還有一種方法可以做到這一點，目前只有在Firefox 4中才能使用，而不使用OpenGl或Canvas。這是通過使用SVG過濾器。奇怪的是它也是來自Webkit和Chrome的nighties，但我看不到任何工作。

下面是一些演示和解釋：

恕我直言，一些anyware接近混合模式是太辛苦現在就實現。在feConvolveMatrix,feSpecularLighting或feColorMatrix上很難找到任何參考資料，這些例子根本無法找到。他們可以工作，但我不知道如何。

我希望像EffectGames suggested：

div.sprite { 
    position: absolute; 
    z-index: 2; 
    composite: add; 
}

這將是一個更好的方式方法。也許有些忍者在數學中可能會讓我們成爲一個能夠做到這一點的人。

編輯：有一個更簡單的SVG規範來完成混合模式。但沒有我測試過的瀏覽器有這個工作（FF4，IE9，Opera11，Webkit Nightly）：http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - 但我也不知道這是否可以在HTML-DOM元素中使用。

來源

2011-04-28 06:42:31

7

你也可以看看這個演示：http://media.chikuyonok.ru/canvas-blending/看看如何用畫布做到這一點。

檢查混合模式公式的來源以及如何應用它們（公式比pixastic或上下文混合器更可讀）。

來源

2011-09-15 21:08:45

+0

這是一個很棒的演示人！你做完了嗎？我可以在我自己的作品中使用代碼進行正常混合嗎？我試圖訪問根目錄來聯繫作者，但它投擲了404！ – 2012-12-20 06:26:01

+0

不，這不是我，這是由着名的俄羅斯前端人物Sergey Chikuyonok（Zen Coding背後的男人，順便說一句）:)在[文章]（http://chikuyonok.ru/2011/08/optimize- with-canvas /）他打電話給演示中的代碼，但是你可以通過[comments]（http://chikuyonok.ru/2011/08/optimize-with-canvas/#comments）與他聯繫，或者看他的電子郵件頁面的頁腳。 – 2012-12-20 12:19:05

相關問題

 相關問題