本文介绍了如何从入门到实战，利用HTML5技术实现一个刮刮卡效果。关键在于设置canvas的globalCompositeOperation属性为'destination-out'，通过交互完成刮奖区域的显示。
效果图：
核心就是使用ctx.globalCompositeOperation = ‘destination-out’;
全部代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.ggk{
width:200px;
height: 100px;
border:1px solid #ccc;
margin:0 auto;
color:red;
position: relative;
}
.ggk span{
position: absolute;
width:100%;
height: 100%;
text-align: center;
font-size:50px;
line-height: 100px;
}
canvas{
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div class='ggk'>
<span id='span'>200元</span>
<canvas id='canvas'></canvas>
</div>
<script type="text/javascript">
var canvas = document.getEle
最低0.47元/天 解锁文章
扫一扫
677
到【灌水乐园】发言
