看身边的朋友都在买彩票，在朋友圈炫耀，作为穷鬼的我，只有羡慕的份，抽了个时间，写了一个刮刮卡，自己开心一下。
先来个截图：
这个效果是用canvas实现的，代码很简单，以下是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#cvs{
border: 1px solid #000;
position: absolute;
z-index: 100;
}
#box{
width: 200px;
height: 100px;
position: absolute;
text-align: center;
font-size: 30px;
line-height: 100px;
}
</style>
</head>
<body>
<canvas id="cvs" width="200" height="100"></canvas>
<div id="box"></div>
</body>
<script type="text/javascript">
var cvs = document.getElementById("cvs")
var ctx = cvs.getContext('2d')
var box =document.getElementById("box")
var arr = ['一等奖','二等奖','三等奖','谢谢惠顾','再来一次','哈哈']
var i = Math.floor(Math.random()*arr.length)
box.innerHTML = arr[i]
ctx.beginPath()
ctx.fillStyle='#ccc'
ctx.fillRect(0,0,cvs.width,cvs.height)
// ctx.closePath()
cvs.onmousedown = function(){
document.onmousemove = function(e){
ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,20,20)
}
document.onmouseup = function(){
document.onmousemove = null
document.onmousedown = null
}
}
</script>
</html>是不是很简单呢，你也可以自己设置奖项哦，说不定就中了呢！