Blend Modes——混合模式

This example shows how to change the canvas compositing / blending mode in post- and precompose event handlers. The Canvas 2D API provides the property globalCompositeOperation with which one can influence which composition operation will be used when drawing on the canvas. The various options are well described on the MDN documentation page.

这个例子展示了如何在postcompose和precompose事件处理中改变Canvas的混合模式。Canvas 2D的API提供了一个globalCompositeOperation属性，使用这个属性可以影响在canvas上绘图的时候使用哪种混合操作。globalCompositeOperation的各种设置在MDN文档页面中有很好的描述。

In this example three circles on the corners of an equilateral triangle are drawn with red, green or blue styles respectively. By setting theglobalCompositeOperation you can change how these colors turn out when they are combined on the map.

在这个例子中，在一个等边三角形各个角上的三个圆分别用红、绿、蓝三种样式被绘制了出来，通过设置globalCompositeOperation属性，你可以改变这些颜色在地图上组合时的显示方式。

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.

你可以在下拉列表框中选择一种操作，你也可以通过图层复选框的勾选操作来控制哪些图层受到影响。

代码：

  
    
    
    
    
    
    
  
  
    

    

      
        
          source-over (default)
          source-in
          source-out
          source-atop
          destination-over
          destination-in
          destination-out
          destination-atop
          lighter
          copy
          xor
          multiply
          screen
          overlay
          darken
          lighten
          color-dodge
          color-burn
          hard-light
          soft-light
          difference
          exclusion
          hue
          saturation
          color
          luminosity
        
        Canvas compositing / blending mode
      
      
        
        Red circle affected
      
      
        
        Green circle affected
      
      
        
        Blue circle affected