1. 首页
  2. 问答
  3. HTML5中可以使用photoshop混合模式吗？

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

2010-11-25 39 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

相关问题

 相关问题