HTML5中是否有类似photoshop的混合模式？ [英] Are photoshop-like blend modes possible in HTML5?

问题描述

我想在我的网页上放置一个红色的矩形< div> 元素，使它看起来不仅透明，而且像Photoshop的乘法模式混合。 / p>

< div> 会有 position：fixed

是否可以使用任何HTML5 / CSS3 / canvas / SVG技巧？

解决方案

我已经创建了一个单独的，轻量级的开源库来执行Photoshop风格的混合模式从一个HTML Canvas上下文到另一个：context-blender 。这里是示例用法：

  //可能是一个offscreen画布
 var over = someCanvas.getContext 2d'）; 
 var under = anotherCanvas.getContext（'2d'）; 
 
 over.blendOnto（under，'screen'，{destX：30，destY：15}）; 
  

请参阅 README 以获取更多信息，包括当前支持的混合模式。

您可以使用它从一个画布执行倍增，通过标准HTML元素。

I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode.

The <div> would have position: fixed, so the content below it would change quickly.

Is that possible with any HTML5 / CSS3 / canvas / SVG trick?

解决方案

I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:

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

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

See the README for more information, including the currently-supported blend modes.

You could use this to perform multiply from one canvas to another, but not over standard HTML elements.

这篇关于HTML5中是否有类似photoshop的混合模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！