<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>控制叠加风格</title>
<style>
option {
height:24px;
line-height:24px
}
</style>
</head>
<body>
<select style="height:40px; font-size:18px; " onchange="draw(this.value);">
<option value="source-over">source-over
新绘制的图形将会显示在顶层，覆盖以前绘制的图形。这是默认的行为
</option>
<option value="destination-over">destination-over
新绘制的图形将放在原图形的后面
</option>
<option value="source-in">source-in
新绘制的图形与原图形进行in运算，只显示新图形与原图形重叠的部分，新图形与原图形的其他部分都会变成透明
</option>
<option value="destination-in">destination-in
原图形与新绘制的图形做in运算，只显示原图形与新图形重叠的部分，新图形与原图形的其他部分都会变成透明
</option>
<option value="source-out">source-out
新绘制的图形与原图形做out运算，只显示新图形与原图形不重叠的部分，新图形与原图形的其他部分都会变成透明
</option>
<option value="destination-out">destination-out
原图形与新绘制的图形做out运算，只显示原图形与新图形不重叠的部分，新图形与原图形的其他部分都会变成透明
</option>
<option value="source-atop">source-atop
只绘制新图形与原图形重叠部分和原图形未被覆盖的部分，新图形的其他部分变成透明的
</option>
<option value="destination-atop">destination-atop
只绘制原图形与新图形重叠部分和新图形未重叠的部分。原图形的其他部分变成透明的。不绘制新图形的重叠部分。
</option>
<option value="lighter">lighter
新图形和原图形都绘制。重叠部分绘制两种颜色值相加的颜色
</option>
<option value="xor">xor
绘制新图形与原图形不重叠部分，重叠部分变成透明的
</option>
<option value="copy">copy
只绘制新图形，原图形变成透明的
</option>
</select>
<canvas id="ourCanvas" width="700" height="500" style="border:3px dashed #0094ff "></canvas>
<script type="text/javascript">
var canvas = document.getElementById("ourCanvas");
var ctx = canvas.getContext('2d');
var draw = function (compositeOper) {
//保持当前的绘图状态
ctx.save();
//获取canvas元素对应的DOM对象
ctx.clearRect(0, 0, 400, 200);
ctx.fillStyle = '#ed0c43';
ctx.font='italic 30px 黑体' ;
ctx.textBaseline = 'top';
ctx.fillText("原图形", 160, 100);
ctx.fillRect(60, 220, 160, 100);
//设置图形叠加风格
ctx.globalCompositeOperation = compositeOper;
//设置填充颜色
ctx.fillStyle = '#000'
ctx.font = 'italic 30px 黑体';
ctx.textBaseline = 'top';
ctx.fillText("新图形", 260,200);
ctx.fillRect(160, 270, 160, 100);
//恢复之前保存的绘图状态
ctx.restore();
}
draw("destination-over")
</script>
</body>
</html>