Canvas之图像合成

用户2519162427112025-07-28 13:59

Canvas之图像合成

js 复制代码

ctx.beginPath();
ctx.fillStyle = '#f00';
ctx.fillRect(50, 50, 200, 200);

ctx.globalCompositeOperation = 'xor';

ctx.beginPath();
ctx.fillStyle = '#0f0';
ctx.fillRect(150, 150, 200, 200);

我们可以将前后两个图像进行合成。通过设置 ctx.globalCompositeOperation 可以选择图片合成的方式，这里指的是路径合成。设置时需要放在前后两个图形中间。

路径合成也是形状合成。有 source-over,in,out,atop ，分别为重叠部分展示后面，重叠后面部分，不重叠后面部分，前面重叠后面，destination 也有类似的四个，只是将后面换为前面为中心。copy 展示后面，xor 异或，展示前后两个不重叠的部分。

js 复制代码

ctx.beginPath();
ctx.fillStyle = '#f00';
ctx.fillRect(50, 50, 200, 200);

ctx.globalCompositeOperation = 'lighten';

ctx.beginPath();
ctx.fillStyle = '#0f0';
ctx.fillRect(150, 150, 200, 200);

不仅是形状的混合，颜色也可以混合。和之前的使用方法一样。lighter 是将两个相同区域的像素相加，multiply 是将两个像素进行计算，亮色的保持原色，暗色的进行暗化处理，所以整体偏暗。screen 是将暗色保持原色，亮色的进行亮化处理，所以整体偏亮。darken 没有进行计算，直接取两个像素中最暗的像素，整体偏暗，lighten 也没有进行计算，直接取两个像素中最亮的像素，整体偏亮。

如果是两个图片，ctx.globalCompositeOperation 要写在前一个图片的加载事件最后或者是后一个图片加载事件的前面，不能像以前写在加载事件之外。