ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add an example for various blend modes

Browse Source
This commit is contained in:
Marc Jansen
2015-05-15 12:54:36 +02:00
parent 16c4082898
commit 26ad3fe6b1
3 changed files with 257 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/blend-modes.html
+76
View File
@@ -0,0 +1,76 @@
---
template: example.html
title: Blend modes example
shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
docs: >
<p>This example shows how to change the canvas compositing / blending mode in
post- and precompose event handlers. The Canvas 2D API provides the property
<code>globalCompositeOperation</code> with which one can influence which
composition operation will be used when drawing on the canvas. The various
options are well described on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">MDN
documentation page</a>.</p>
<p>In this example three circles on the corners of an equilateral triangle are
drawn with red, green or blue styles respectively. By setting the
<code>globalCompositeOperation</code> you can change how these colors turn out
when they are combined on the map.</p>
<p>You can select an operation in the select-field and you can also control
which layers will be affected by the chosen operation through the layer
checkboxes.</p>
tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<form class="form-horizontal">
<label>
<select id="blend-mode" class="form-control">
<option value="source-over">source-over (default)</option>
<option>source-in</option>
<option>source-out</option>
<option>source-atop</option>
<option>destination-over</option>
<option>destination-in</option>
<option>destination-out</option>
<option>destination-atop</option>
<option>lighter</option>
<option>copy</option>
<option>xor</option>
<option>multiply</option>
<option>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option selected>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
Canvas compositing / blending mode
</label>
<label>
<input type="checkbox" id="affect-red" checked>
Red circle affected
</label>
<label>
<input type="checkbox" id="affect-green" checked>
Green circle affected
</label>
<label>
<input type="checkbox" id="affect-blue" checked>
Blue circle affected
</label>
</form>
</div>
</div>