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

3,574 阅读3分钟

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

  1. 刮刮卡
  2. 大转盘
  3. 九宫格

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

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

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

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


⚠️⚠️⚠️ 刚刚更新了 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>

结语:

插件的使用,我们只需要 new 一个对象,并配置一些基本的参数,最后调用该对象中的 render() 方法,来完成初始化操作。

插件的实现很简单,和之前三章讲的实现方法是一样的,只不过它们被封装到了一个对象中。如果读者对插件的实现感兴趣,可以在 ./src/ES6/*.js 下找到源码。

github 源码地址