使用Canvas实现刮刮卡效果
Canvas是HTML5中一个非常强大的标签，它可以用来绘制图形、实现动画和游戏等。今天我们要介绍的是使用Canvas实现刮刮卡效果的实例。
什么是刮刮卡效果？
刮刮卡效果是一种常见的交互效果，在很多网站和应用程序中都可以看到。它的特点是用户可以通过点击、滑动或手指滑动来揭示隐藏的内容。这种效果可以用来展示奖品信息、游戏结果或其他需要揭示的内容。
使用Canvas实现刮刮卡效果
要使用Canvas实现刮刮卡效果，我们需要创造一个Canvas元素，并在上面绘制一个灰色的矩形，覆盖我们想要揭示的内容。当用户点击或滑动Canvas时，我们可以根据用户的交互行为来擦除灰色的矩形，显示出隐藏的内容。
实现原理
实现刮刮卡效果的原理是使用Canvas的globalCompositeOperation属性来实现擦除效果。我们可以将Canvas的globalCompositeOperation属性设置为'destination-out'，这样就可以使得Canvas上的绘制操作产生擦除效果。
Demo代码
下面是一个使用Canvas实现刮刮卡效果的Demo代码：
```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>刮刮卡效果</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<style>
.content,.cover{
width:400px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin:-200px 0 0 -200px;
}
.content{
font-size:48px;
line-height:400px;
text-align:center;
}
h3{
text-align:center;
line-height:200px;
}
</style>
</head>
<body>
<h3>快来刮开！！！</h3>
<div class="content" >中奖啦~！</div>
<canvas id="cover" class="cover" width="400" height="400"></canvas>
<script>
var isdown = false,
cover = document.getElementById("cover"),
covercanvas = cover.getContext("2d");
// 设置Canvas的填充颜色
covercanvas.fillStyle="transparent";
covercanvas.fillRect(0,0,400,400);
// 设置Canvas的擦除效果
covercanvas.globalCompositeOperation = 'destination-out';
// 监听用户的交互行为
cover.addEventListener('touchstart',isDown);
cover.addEventListener('touchmove',draw);
cover.addEventListener('touchend',isUp);
cover.addEventListener('mousemove',draw);
// 绘制擦除效果
function draw( e ){
e.preventDefault();
if(isdown){
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var _height= parseInt((window.innerHeight-400)/2),
_width= parseInt((window.innerWidth-400)/2),
touchTop=e.clientY - _height,
touchLeft=e.clientX - _width;
with(covercanvas){
beginPath();
arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
fill();
}
}
}
</script>
</body>
</html>
```
知识点总结
* 使用Canvas实现刮刮卡效果需要创造一个Canvas元素，并在上面绘制一个灰色的矩形，覆盖我们想要揭示的内容。
* 使用globalCompositeOperation属性可以实现擦除效果。
* 监听用户的交互行为，并根据用户的行为来擦除灰色的矩形，显示出隐藏的内容。
* 在移动端需要阻止浏览器的默认功能，以确保Canvas的交互行为正确。
