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

时间 2019-11-24

标签 canvas 基础系列之大转盘九宫刮刮卡抽奖插件封装栏目软件设计繁體版

原文原文链接

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

本期并非枯燥乏味的教学贴。html

相反，本期咱们不教造轮子，咱们教若是使用工具😆。java

笔主将前面几期内容概括总结，使用面向对象的方式重构了代码，写了一个简单实用的小插件。如今读者只须要简单的配置，就能够实现上述几种抽奖。git

若是你只想作伸手党，好的，来兄台，给你！插件地址github

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

安装插件：

咱们只须要在项目中引入 luckyDraw.min.js 这个文件，就能够开始使用插件。下载连接数组

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

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

大转盘：

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

<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 源码地址