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

举报
收藏
赞