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>