本文主要是介绍没事就来刮一刮——canvas 写刮刮乐，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
看身边的朋友都在买彩票，在朋友圈炫耀，作为穷鬼的我，只有羡慕的份，抽了个时间，写了一个刮刮卡，自己开心一下。
先来个截图：
这个效果是用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 = nulldocument.onmousedown = null}}
</script>
</html>是不是很简单呢，你也可以自己设置奖项哦，说不定就中了呢！
这篇关于没事就来刮一刮——canvas 写刮刮乐的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
