安装插件：

我们只需要在项目中引入 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 源码地址