globalCompositeOperation
该属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。
源图像 = 你打算放置到画布上的绘图
目标图像 = 你已经放置在画布上的绘图
<canvas id="canvas" width="800" height="600"></canvas>
<script>
var canvas = document.querySelector("#canvas")
var ctx = canvas.getContext("2d")
//第一个红色矩形为目标图像
ctx.fillStyle = "hotpink"
ctx.fillRect(100,100,200,200)
//第二个蓝色矩形为源图像
ctx.fillStyle = "deepskyblue"
ctx.fillRect(200,200,200,200)
</script>
设置globalCompositeOperation的值是atop
设置source-in,如下
设置source-out,如下
设置destination-over,如下
设置destination-atop,如下
设置destination-in,如下
设置destination-out,如下（刮刮卡就是用这个）
设置lighter,如下
设置copy,如下（copy就是之前的图片都不见了，只保留最新的图像）
设置xor,如下（等同于设置lighter）
刮刮卡功能实现
<style type="text/css">
#ggk{
width:400px;
height:100px;
position:relative;
}
#ggk .jp{
width:400px;
height:100px;
position:absolute;
left:0;
top:0;
text-align:center;
color:deeppink;
font-size:50px;
line-height:100px;
}
#canvas{
width:400px;
height:100px;
position:absolute;
left:0;
top:0;
}
</style>
<body>
<div id="ggk">
<div class="jp">谢谢惠顾</div>
<canvas id="canvas" width="400" height="100"></canvas>
</body>
<script>
var canvas = document,querySelector("#canvas")
var ggkDom = document,querySelector("#ggk")
var ctx = canvas.getContext('2d')
ctx.fillStyle = 'darkgray'
ctx.fillRect(0,0,400,100)
ctx.font = "20px 微软雅黑"
ctx.fillStyle = 'fff'
ctx.fillText("刮刮卡".180,50)
var isDraw = false;
// 设置isDraw = true,即为允许绘制
canvas.onmousedown = function(){
isDraw = true
}
// 移动的时候绘制圆形，将源图像内的目标的内容给清除掉
canvas.onmousemove = function(e){
if(isDraw){
var x = e.pageX - ggkDom.offsetLeft
var y = e.pageY - ggkDom.offsetTop
ctx.globalCompositeOperation = "destination-out"
ctx.arc(x,y,20,0,2*Math.PI)
ctx.fill()
}
}
canvas.onmouseup = function(){
isDraw = false
}
</script>