Canvas 基础系列（零）之大转盘九宫格刮刮卡抽奖插件封装

最新推荐文章于 2021-12-02 07:00:00 发布

weixin_34362991

最新推荐文章于 2021-12-02 07:00:00 发布

阅读量262

点赞数

原文链接：https://juejin.im/post/599a322bf265da246f37f3ae

版权

前面的几期内容详细讲解了几种抽奖模式的实现方法：

刮刮卡
大转盘
九宫格

本期并不是枯燥乏味的教学贴。

相反，本期我们不教造轮子，我们教如果使用工具?。

笔主将前面几期内容归纳总结，使用面向对象的方式重构了代码，写了一个简单实用的小插件。现在读者只需要简单的配置，就可以实现上述几种抽奖。

如果你只想做伸手党，好的，来兄台，给你！插件地址

⚠️⚠️⚠️
刚刚更新了 awards 数组属性的结构，以下代码已更新，带来不便敬请谅解~?
详细可查看文档

安装插件：

我们只需要在项目中引入 luckyDraw.min.js 这个文件，就可以开始使用插件。下载链接

该插件不依赖任何第三方库。

<script src=".src/dist/luckyDraw.min.js"></script>复制代码

大转盘：

以下代码是最简洁的配置方法，需要配置转盘颜色，转动时间速率等，可参阅文档

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
<script src="./luckyDraw.min.js"></script>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

    new RouletteWheel({
        centerX: canvas.width / 2,   // 转盘圆心 x 轴坐标
        centerY: canvas.height / 2,  // 转盘圆心 y 轴坐标
        outsideRadius: 200,          // 转盘的半径

        awards: [                    
            {type: 'text', content: '10元话费'},
            {type: 'text', content: 'iphone 8'},
            {type: 'text', content: '大保健'},
            {type: 'image', content: 'http://tse2.mm.bing.net/th?id=OIP.lnWeNzoVmFXNZXe4bXh7lQDHEs&w=193&h=291&c=7&qlt=90&o=4&dpr=2&pid=1.7'}
        ],

        finish(index) {              // 抽奖完成的回调，返回一个下标，通过下标找到抽中的奖品
            switch(this.awards[index].type) {
                case 'text':
                    alert('?恭喜您中得：' + this.awards[index].content);
                    break;
                case 'image':
                    alert('?恭喜您中得：王珞丹');
                    break;
                case 'losing':
                    alert('?很遗憾，您没有中奖~');
                    break;
            }
        }
    }).render(canvas, context);      // render 方法，执行渲染
</script>复制代码

九宫格：

以下代码是最简洁的配置方法，需要配置九宫格颜色，动画时间速率等，可参阅文档

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
<script src="./luckyDraw.min.js"></script>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

    new Sudoku({
        sudokuSize: canvas.width,

        awards: [
            {type: 'text', content: '10元话费'},
            {type: 'text', content: '20元停车费'},
            {type: 'text', content: '大保健'},
            {type: 'losing', content: '未中奖'},
            {type: 'text', content: '火星一日游'},
            {type: 'text', content: '大闸蟹'},
            {type: 'text', content: 'iphone 8'},
            {type: 'image', content: 'https://img12.360buyimg.com/n7/jfs/t4807/209/1436278963/496606/8e486549/58f0884eNcec87657.jpg'}
        ],

        finish(index) {
            switch(this.awards[index].type) {
                case 'text':
                    alert('?恭喜您中得：' + this.awards[index].content);
                    break;
                case 'image':
                    if (index === 7) alert('?恭喜您中得战争磨坊水冷机');
                    break;
                case 'losing':
                    alert('?很遗憾，您没有中奖~');
                    break;
            }
        }
    }).render(canvas, context);
</script>复制代码

刮刮卡：

刮刮卡的宽高与 canvas 的宽高相等；

<body>
    <canvas id="canvas" width="400" height="60"></canvas>
</body>
<script src="./luckyDraw.min.js"></script>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

    new ScratchCard({
        // 奖品图片
        awardBackgroundImage: 'http://tse3.mm.bing.net/th?id=OIP.X7zblF16pKGur6refGZsWQEsDg&pid=15.1'
    }).render(canvas, context);
</script>复制代码