canvas学习（三）:刮刮卡

前言

使用canvas做一个一个刮刮卡;
效果图如下：

前置学习-globalCompositeOperation属性

1. 什么是源图像、目标图像

   ctx.globalCompositeOperation() :设置或返回如何将一个源（新的）图像绘制到
   目标（已有的）图像上
   
   源图像  =  你正打算放置到画布上的绘图
   目标图像  =  你已经放置到画布上的绘图
   

2. 绘制图像的叠加模式属性globalCompositeOperation

我们可以通过ctx.globalCompositeOperation来设置源图像和目标图像的叠加方式
ctx.globalCompositeOperation='source-over'：默认为：source-over 源图像覆盖在目标图像上 ；
ctx.globalCompositeOperation="source-atop" // source-atop 源图像在目标图像外的部分不可见
ctx.globalCompositeOperation="source-in"   // source-in 源图像在目标图像外的部分不可见 目标头像是透明的 取交集
ctx.globalCompositeOperation="source-out"  // source-out 在目标图像之外显示源图像 目标图像之外的源图像会部分显示 目标图像透明
 ctx.globalCompositeOperation="destination-over"
    在源图像上显示目标图像 // 即默认不覆盖目标图像 // 新画图像在底部
 ctx.globalCompositeOperation="destination-atop"
    源图像顶部显示目标图像 目标图像位于源图像外的不显示
ctx.globalCompositeOperation="destination-in"
    在源图像中显示目标图像 只有源图像上的目标图像会显示，源图像透明
ctx.globalCompositeOperation="destination-out"
    在源图像中显示目标图像 只有源图像之外的目标图像会显示，源图像透明
ctx.globalCompositeOperation="lighter"
    显示源图像加目标图像 合并的地方不显示
ctx.globalCompositeOperation="copy"
    显示源图像忽略目标图像
ctx.globalCompositeOperation="xor"
    使用异或操作对源图像和目标图像进行组合

实现刮刮卡

1. 思路解析

要使用到的属性：ctx.globalCompositeOperation="destination-out"
			// 在源图像中显示目标图像 只有源图像之外的目标图像(画布上已有的图像)会显示，
			源图像(我们绘制的圆)透明
本质是：
点击鼠标移动画圆，画的圆与本来已有的图像的叠加样式透明，显示canvas下面覆盖的div字体

思路解析：
1、存在一个谢谢惠顾的div盒子
2、定位一个canvas到div盒子上面，等宽等高，绘制一个灰色图形，绘制字体
3、鼠标按下监听，鼠标移动事件 ->以鼠标位置画小圆，叠加部分透明
4、鼠标弹起，结束绘制

2. 页面架构和样式

<div id="ggk">
   <div class="jp">谢谢惠顾</div>
   <canvas id="canvas" width="400" height="100">
     你的浏览器不支持canvas
   </canvas>
 </div>
 <script>
   // 1、找到画布对象
   /** @type {HTMLCanvasElement} */ 
   var canvas= document.getElementById('canvas')
   var ggkDOM=document.querySelector('#ggk')
   console.log([canvas])
   // 2、上下文对象，画笔
   var ctx=canvas.getContext('2d') // 用于2d对象绘制 webgl是3d引擎
 </script>

<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;
       line-height: 100px;
       color: deeppink;
       font-size: 50px;
     }
     #ggk #canvas{
       width: 400px;
       height: 100px;
       position: absolute;
       left: 0;
       top: 0;
     }
 </style>

3. 绘制canvas

	ctx.fillStyle="darkgray"
   ctx.fillRect(0,0,400,100) // 灰色矩形
   ctx.font="20px 微软雅黑"
   ctx.fillStyle="#fff"
   ctx.fillText("刮 刮 卡",160,60) // 白色字体

4. 鼠标逻辑

// 函数逻辑 // 鼠标移动上去可以画圆 画的圆不显示 交集内容不显示
// 监听鼠标按下
   var isDraw = false // 控制是否在刮奖
   canvas.onmousedown=()=>{
     isDraw = true
   }
   canvas.onmouseup=()=>{
     isDraw = false
   }
   // 鼠标移动时绘制圆形 将源图像的目标内容清除掉
   canvas.onmousemove=(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()
     }
   }