Canvas实现PC端刮刮卡和生成四位随机验证码

一、先来实现刮刮卡

先来看效果图

思路：采用absolute定位用一个canvas元素完全覆盖住你想刮开卡后想显示的内容，采用画布的globalCompositeOperation:destination-out属性来实现在被鼠标划过的地方的画布部分变得透明，画布透明之后便可以看到被画布覆盖的内容。从而实现刮刮卡效果。

1.所需知识点

1.获得操作canvas的对象

getContext():获得用于在画布上绘图的对象。

2.getImageData(x,y,width,height)

定义：getImageData()方法返回ImageData对象，该对象拷贝了画布指定矩形的像素数据，该对象不是一张
图片，而是保存了画布中数据的对象。
参数：
  1.x、y分别表示开始复制的左上角的位置坐标。
  2.width、height分别表示要复制的矩形区域的宽度、高度。
  
对于ImageData对象中的每个像素，都存放着四个消息：
	R-红色(0-255)
	G-绿色(0-255)
	B-蓝色(0-255)
	A-alpha通道(0-255；0是透明，255是完全可见的)
注意：color/alpha信息以数组形式存在，存储在ImageData对象的data属性中。

3.ImageData对象的属性

1.width:返回ImageData对象的宽度。
2.height:返回ImageData对象的高度。
3.data:返回一个对象，其包含指定的ImageData对象的图像数据。

4.合成(重点)

1.globalCompositeOperation:设置或返回源(新的)图像如何绘制到目标(已有的)图像上。
	源图像：您打算放置到画布上的绘图。
	目标图像：您已经放置在画布上的绘图。
	destination-out：在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
	定义很抽象，看下面图很容易理解。

5.上代码，在angular实现

<div class="container">
    <p>HTML5实现刮刮卡，屋里藏娇</p>
    <div class="canvasDiv" id="canvasDiv">
        <img id="img" src="../../../assets/image/img.jpg" >
        <canvas id="myCanvas" width="200px" height="300px"></canvas>
    </div>
</div>


*{
   
    margin: 0px;
    padding: 0px;
}
.container{
   
    position: absolute;
    width:300px;
    height:400px;
    background-color: beige;
    box-sizing: content-box;
}
.canvasDiv{
   
    position: absolute;
    width:200px;
    height:300px;
    box-sizing: content-box;
}
img{
   
    position: absolute;
    width:100%;
    height:100%;
    
}
canvas{
   
    position: absolute;
}
.container,.canvasDiv{
   
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    border:5px solid red;
}
.container p{
   
    text-align: center;
    padding-top:10px;
}



export class CanvasComponent implements OnInit {
   
  isMouseDown:boolean=false;//如果鼠标按下，再让mousemove起作用，如果没有这个变量，则鼠标未按下，鼠标滑过canvas也会刮图。
  myCanvas:any;
  myContext:any;
  setCanvas(){
   
    this.myContext.fillStyle="gray";
    this.myContext.fillRect(0,0,this.myCanvas.width,this.myCanvas.height);//目标层
    this.myContext.globalCompositeOperation="destination-out";//在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
    this.myCanvas.addEventListener("mousedown",this.mouseDown,false);
    this.myCanvas.addEventListener("mousemove",this.mouseMove,false)