Canvas 基礎系列（零）之大轉盤九宮格刮刮卡抽獎外掛封裝

木子七發表於2017-08-21
Canvas封裝

前面的幾期內容詳細講解了幾種抽獎模式的實現方法：

  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 原始碼地址

相關文章