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>
複製代碼