本素材来源：https://www.cnblogs.com/hzj680539/p/5068487.html
尊重第一作者，把知识奉献给大家！
黄色圆为原图，蓝色正方形为新图
globalCompositeOperation = “source-over” 这是默认设置，新图形会覆盖在原有内容之上。
destination-over 会在原有内容之下绘制新图形。
source-in 新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。
destination-in 原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。
source-out 结果是只有新图形中与原有内容不重叠的部分会被绘制出来。
destination-out 原有内容中与新图形不重叠的部分会被保留。
source-atop 新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。
destination-atop 原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形
lighter 两图形中重叠部分作加色处理。
darker 两图形中重叠的部分作减色处理。
xor 重叠的部分会变成透明。
copy 只有新图形会被保留，其它都被清除掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{background-color: #000;}
canvas{border:1px solid deeppink;}
</style>
</head>
<body>
<canvas width='500' height='500'></canvas>
<script>
const oC = document.querySelector('canvas');
const ctx = oC.getContext( "2d" );
ctx.beginPath();
ctx.fillStyle = '#fff'
ctx.arc( 200,200,100,0,6.3,false )//源图像
ctx.fill()
ctx.closePath();
//"destination-out" 只显示目标图像之外的源图像
ctx.globalCompositeOperation = "destination-out"
ctx.beginPath();
ctx.fillStyle = '#f00'
ctx.arc( 250,200,100,0,6.3,false ) //目标图像
ctx.fill()
ctx.closePath();
</script>
</body>
</html>
