canvas图片处理

一、图形组合方式

以下是图片组合的一些方式，有两个概念需要清楚，(目标图和源图) 目标图：先添加的图像；源图：后添加的图像；

8A66A93871BD7FCC1BF6213E1C4FB284.png

1. 默认值：source-over

// 圆
        context.beginPath();
        context.arc(100,100,100,0,Math.PI*2);
        context.fillStyle = "red";
        context.fill();
        // 默认：source-over
        context.globalCompositeOperation = "source-over";
        // 方块
        context.beginPath();
        context.fillStyle = "blue";
        context.fillRect(50,50,200,200);

默认效果图：

D660F5A13F4C74F8BD3D41ABE7BA6CE6.png

2. source-atop:只显示在目标图中源图的部分

context.globalCompositeOperation = "source-over";

效果图：

D3844B9519918797D027D407F12C0875.png

3. destination-in:只显示源图中目标函数的部分

context.globalCompositeOperation = "destination-in";

效果图：

D23E1FB2C521B3732BF59F3BB814D2EA.png

这里就展示三个值做对应的不同效果，其余的大家可以自己试试。