day12-0827
html - 刮刮奖
start
painting
刮刮奖的整体思路，就是canvas的动态绘制「事件驱动」
使用两个canvas，下层为最终展示层「刮完后的涂层」，上层为「刮层，银色层」
每次移动手指时，绘制图形「原型，三角形，等」，特点是透明，可以使得下层显现
重点：
- 透明涂层绘画
this.ctx.globalCompositeOperation = "destination-out"; // 设置这句才可以绘制透明区域
- 绘制状态 - 绘制百分比
this.ctx.getImageData(0, 0, Width, Height); // rgba 计算alpha通道的占比即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>大转盘</title>
<link rel="stylesheet" href="../css/aui.2.0.css">
<link rel="stylesheet" href="../css/lucky-card.css">
</head>
<body>
<!-- 文字类型 -->
<div id="scratch" class="aui-content-padded lc-scratch">
<div id="card" class="lc-card" style="padding: 1rem .4rem; display: flex;justify-content: center;align-items: center;">
<div style="font-size: 1.4rem; color: red;" id="aui-content">
917来啦！
</div>
</div>
</div>
<!-- 图片类型 -->
<div id="scratch2" class="aui-content-padded lc-scratch">
<div id="card2" class="lc-card" style="height: 400px;">
<img src="../image/demo2.png" width="100%" height="400" alt="">
</div>
</div>
<div class="aui-content-padded">
<div class="aui-row" style="margin: .8rem auto;">
<div class="aui-col-xs-12">
<div class="aui-btn aui-btn-block aui-btn-primary" tapmode onclick="handleConfrimAward()">确认领奖</div>
</div>
</div>
</div>
<!-- 引入script -->
<script src="../js/zepto.min.js"></script>
<script src="../js/lucky-card.js"></script>
<script>
'use strict'
var card = null
Zepto(function ($) {
// loaded
card = LuckyCard.case({
coverColor: '#ccc',
ratio: .6, // 超过90%后触发回调函数,
scratchName: 'scratch',
cardName: 'card',
callback: function () {
this.clearCover()
}
})
LuckyCard.case({
coverColor: '#ccc',
ratio: .6, // 超过90%后触发回调函数,
scratchName: 'scratch2',
cardName: 'card2',
callback: function () {
this.clearCover()
}
})
})
function handleConfrimAward() {
if (!card.isPolluted) {
alert('先刮奖！')
return
}
}
</script>
</body>
</html>
注：使用的是luckycard - Github
