canvas 的 图形组合方式

* 设置图形的组合方式:

* 两个概念:

* a, 源(source):要绘制的新图形

* b, 目标(destination): 可能已经绘制了图形的 2D 渲染上下文

* 11个属性值;

* 1,source-over:绘制两者  源在目标上

* 2,destination-over:绘制两者  目标在源上

* 3,source-atop:绘制目标 和 源与目标重合的部分

* 4,destination-atop:绘制源 和 目标与源重合的部分

* 5,source-in:绘制重合部分  重合部分为源

* 6,destination-in:绘制重合部分  重合部分为目标

* 7,source-out:绘制 源与目标 没有重合的部分(只绘制源)

* 8,destination-out:绘制 目标 与源 没有重合的部分(只绘制目标)

* 9,lighter:绘制两者 重合部分色值取 色值相加的值 最大 255

* 10,copy:不绘制目标

* 11,xor:绘制源与目标 不绘制重合部分

* 

context.globalCompositeOperation = 'source-over'; 默认设置

JS 部分

var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
context.globalCompositeOperation = "destination-out";

source-over                                       source-atop                                source-in                   source-out    

destination-over                                               destination-atop                    destination-in                 destination-out

    

lighter                                                                    copy                                                      xor