Sind Photoshop-ähnliche Mischmodi in HTML5 möglich?

Ich möchte ein rotes Rechteck setzen <div> Element über meine Webseite, sodass es nicht nur transparent aussieht, sondern im Multiplizieren-Modus von Photoshop auch wie gemischt aussieht.

Das <div> hätte position: fixedsodass sich der Inhalt darunter schnell ändern würde.

Geht das mit jedem HTML5/CSS3/Canvas/SVG-Trick?

Ich habe eine separate, leichtgewichtige Open-Source-Bibliothek erstellt, um Mischmodi im Photoshop-Stil von einem HTML-Canvas-Kontext zu einem anderen auszuführen: Kontext-Blender. Hier ist die Beispielnutzung:

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

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

Siehe die Liesmich für weitere Informationen, einschließlich der derzeit unterstützten Mischmodi.

Sie könnten dies verwenden, um eine Multiplikation von einer Leinwand zur anderen durchzuführen, jedoch nicht über Standard-HTML-Elemente.

Nein (nicht nativ), aber es kommt bald: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

Sie können sich auch diese Demo ansehen: http://media.chikuyonok.ru/canvas-blending/ um zu sehen, wie man das mit Leinwand macht.

Überprüfen Sie die Quelle für die Formeln der Mischmodi und wie Sie sie anwenden (Formeln sind viel besser lesbar als in Pixastic oder Context-Blender).

Dies ist kein HTML5, aber es kommt dem, was Sie fragen, so nahe, wie ich es finden kann.

Javascript-Mischmodi (OpenGL).

Ich glaube nicht, dass “Mischmodi” wie Photoshop nur mit reinem HTML emuliert werden könnten, es sei denn, die Sprache nahm eine scharfe Wendung in eine andere Richtung. Aber es wäre toll, einen einfacheren Weg zu sehen, dies zu tun.

Daran habe ich auch großes Interesse. Viele Layouts, die ich für visuelle Designer programmiert habe, hätten das verwenden können. Abgesehen von den anderen Beiträgen in diesem Thread gibt es eine Möglichkeit, dies zu tun, derzeit nur in Firefox 4, ohne Verwendung von OpenGl oder Canvas. Dies geschieht durch die Verwendung von SVG-Filtern. Anscheinend ist es auch auf Nachthemden von Webkit und Chrome, aber ich konnte noch nichts sehen, das funktioniert.

Hier sind einige Demos und Erklärungen:

• (Demo) http://people.mozilla.org/~roc/filter.xhtml
• https://developer.mozilla.org/en/applying_svg_effects_to_html_content
• https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
• http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html

IMHO ist irgendetwas in der Nähe von Mischmodi im Moment zu schwer zu erreichen. Es ist sehr schwer, Referenzen zu finden feConvolveMatrix, feSpecularLightingoder feColorMatrix, und die Beispiele sind einfach unmöglich, für mich herauszufinden. Sie könnten funktionieren, aber ich weiß nicht wie.

Ich wünsche mir sowas EffectGames vorgeschlagen:

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

Dies wäre ein viel besserer Ansatz. Vielleicht könnte uns ein Ninja mit Mathematikkenntnissen dazu verhelfen.

BEARBEITEN: Es gibt eine einfachere SVG-Spezifikation, um genau Mischmodi auszuführen. Aber kein Browser, den ich getestet habe, funktioniert so (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html – Aber ich weiß auch nicht, ob dies in HTML-DOM-Elementen verwendet werden kann.

Dies ist das nächste, was ich gesehen habe, und ja, alle Assets müssen sich im Canvas befinden. Beachten Sie, dass Internet Explorer Canvas in Version 9 unterstützt, die noch nicht veröffentlicht ist. Wenn Sie also IE<9 unterstützen müssen, müssen Sie eine Problemumgehung verwenden.

Es ist in Chrome Canary gelandet und sollte daher bald veröffentlicht werden. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/