抽奖功能: 九宫格 ,大转盘, 刮刮乐

更新日志:

v0.01

首次提交

v0.02

大转盘与九宫格 awards 奖品数组结构,由字符串,修改为对象;该对象包含两个属性,typecontent,使用 type 属性来决定奖项是否为文字,或者图片。更加灵活,并且清晰;

九宫格去除可配置属性 awardsRowLen,而是以 awards 属性的长度,来决定每行每列显示几个奖项;

文档变得更友好更易于阅读了。


v0.03

九宫格引入 hasButton 属性;该属性默认为 'true',若设置成 'false',将不再绘制默认的抽奖按钮;用户可通过对象的 luckyDraw() 方法,定制抽奖按钮。
引入:

下载 luckyDraw.min.js 并引入。不依赖任何第三方库

<script src="./src/dist/luckyDraw.min.js"></script> 使用: 九宫格抽奖

查看演示效果

最简单的使用:

<body> <canvas id="canvas" width="500px" height="500px"> Canvas not supported </canvas> </body> <!--<script src="./src/dist/luckyDraw.min.js"></script>--> <script src="./src/ES6/Global.js"></script> <script src="./src/ES6/Sudoku.js"></script> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); var ratio = window.devicePixelRatio || 1; new Sudoku({ sudokuSize: canvas.width, jumpIndex: Math.floor(Math.random() * 4), awards: [ {type: 'text', content: '30元话费'}, {type: 'text', content: 'iphoneX'}, {type: 'losing', content: '未中奖'}, {type: 'text', content: 'MackBook Pro'}, {type: 'image', content: 'https://img12.360buyimg.com/n7/jfs/t4807/209/1436278963/496606/8e486549/58f0884eNcec87657.jpg'}, {type: 'losing', content: '海南3日游'}, {type: 'image', content: 'https://img11.360buyimg.com/n7/jfs/t3187/325/423764794/213696/f4eb1dbd/57b68142Nbe104228.jpg'}, {type: 'text', content: '火星一日游'} ], finish: function (index) { switch(this.awards[index].type) { case 'text': alert('

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。