HTML5 Canvas繪製轉盤抽獎

時間 2019-11-19

標籤 html5 html canvas 繪製轉盤抽獎欄目 HTML5 简体版

原文原文鏈接

提示，如下是實現思路，文章未尾有完整項目倉庫。

下面簡單介紹了HTML5 Canvas的來歷、瀏覽器兼容性，主要內容是如何實現轉盤抽獎，最後的DEMO很是簡陋，真實場景還會有不少須要考慮和改進的地方(好比：瀏覽器前綴)，這裏只講一步步實現的思路。javascript

Demo

在線演示css

HTML5 Canvas

Canvas元素最先是Apple在Safari1.3中引入的，後在HTML5中標準化。html

瀏覽器支持

查看詳細瀏覽器支持html5

兼容舊版IE可以使用:java

1 . ExplorerCanvas Github, Google Codegit

Google工程師使用VML(Vector markup Language)技術模擬Canvas，不支持一些高級功能，如：漸變、陰影、剪切區域等。github

2 . FlashCanvasweb

依賴Flash插件，增長了更多功能支持，有Free、Pro版。
ExploreCanvas、FlashCanvas Free、FlashCanvas Pro功能支持對比：
http://flashcanvas.net/docs/canvas-apicanvas

Canvas API

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_APIapi

抽獎轉盤

1. 繪製扇形

HTML

<canvas id="canvas" width="300" height="300">抱歉！瀏覽器不支持。</canvas>

JS

var num = 6;   // 獎品數量
var canvas = document.getElementById('canvas');
var btn = document.getElementById('btn');
if(!canvas.getContext){
    alert('抱歉！瀏覽器不支持。');
    return;
}
// 獲取繪圖上下文
var ctx = canvas.getContext('2d');
for (var i = 1; i <= num; i++) {
    // 保存當前狀態
    ctx.save();
    // 開始一條新路徑
    ctx.beginPath();
    // 位移到圓心，下面須要圍繞圓心旋轉
    ctx.translate(150, 150);
    // 從(0, 0)座標開始定義一條新的子路徑
    ctx.moveTo(0, 0);
    // 旋轉弧度,需將角度轉換爲弧度,使用 degrees * Math.PI/180 公式進行計算。
    ctx.rotate(360 / num * i * Math.PI/180);
    // 繪製圓弧
    ctx.arc(0, 0, 150, 0,  2 * Math.PI / num, false);
    if (i % 2 == 0) {
        ctx.fillStyle = '#ffb820';
    }else{
        ctx.fillStyle = '#ffcb3f';
    }
    // 填充扇形
    ctx.fill();
    // 繪製邊框
    ctx.lineWidth = 0.5;
    ctx.strokeStyle = '#f48d24';
    ctx.stroke();
    // 恢復前一個狀態
    ctx.restore();
}

調用繪圖上下文的save()方法能夠保存座標系當前的狀態。而後，再調用restore()方法能夠返回保存過的前一個狀態。若是要保存座標系的狀態，必須在應用任何變換以前調用save()，這樣再調用restore()才能把座標系恢復到正常狀態。而在多步操做繪製複雜圖形時，每每都須要屢次保存座標系狀態。這些狀態就如同瀏覽器中的歷史記錄同樣。每次調用restore()，座標系就會恢復到前一個最近的狀態。

參考：

rotate: http://www.w3school.com.cn/tags/canvas_rotate.asp
arc: https://developer.mozilla.org/zh-CN/docs/Web/API/ CanvasRenderingContext2D/arc
http://www.w3school.com.cn/tags/canvas_arc.asp

2. 動畫

CSS

#canvas{
    border: 1px solid #000;
    -webkit-transition: all 6s ease;
    transition: all 6s ease;
}

canvas.style.transform = 'rotate(1800deg)';

3. 優化

未獲取中獎數據前預旋轉，加強用戶體驗

CSS

/* 1. 點擊抽獎，動畫勻速執行linear */
#canvas{
    border: 1px solid #000;
    -webkit-transition: all 6s linear;
    transition: all 6s linear;
}
/* 2. 獲取中獎數據，動畫勻速執行並慢慢結束ease-out */
#canvas{
    border: 1px solid #000;
    -webkit-transition: all 6s ease-out;
    transition: all 6s ease-out;
}

參考：
貝塞爾曲線

工具

FabricJS

一個簡單而強大的 JavaScript Canvas 庫。
http://fabricjs.com

TwoJS

Two.js 是面向現代 Web 瀏覽器的一個2D繪圖 API。
http://jonobr1.github.io/two.js/

其它實現方式

CSS實現大轉盤

http://sbdccc.wx.bad.uctoo.com/?_a=reward&_u=index.christmas&r_uid=39

完整代碼

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Drawing sector</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
    #turntable{
        position: relative;
    }
    #canvas{
        border: 1px solid #000;
        -webkit-transform: all 6s ease;
        transition: all 6s ease;
    }
    #btn{
        position: absolute;
        left: 120px;
        top: 120px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #fff;
        line-height: 60px;
        text-align: center;
    }
    #btn:after{
        position: absolute;
        display: block;
        content: '';
        left: 10px;
        top: -32px;
        width: 0;
        height: 0;
        overflow: hidden;
        border-width: 20px;
        border-style: solid;
        border-color: transparent;
        border-bottom-color: #fff; 
    }
</style>
</head>
<body>
    <div id="turntable">
        <canvas id="canvas" width="300" height="300">抱歉！瀏覽器不支持。</canvas>
        <a id="btn" href="javascript:;">抽獎</a>
    </div>
    <script>
        window.addEventListener('load', function(){
            var num = 6;   // 獎品數量
            if (num % 2 !== 0){
                alert('請配置偶數獎項');
            }
            var canvas = document.getElementById('canvas');
            var btn = document.getElementById('btn');
            if(!canvas.getContext){
                alert('抱歉！瀏覽器不支持。');
                return;
            }
            // 獲取繪圖上下文
            var ctx = canvas.getContext('2d');
            for (var i = 0; i < num; i++) {
                // 保存當前狀態
                ctx.save();
                // 開始一條新路徑
                ctx.beginPath();
                // 位移到圓心，下面須要圍繞圓心旋轉
                ctx.translate(150, 150);
                // 從(0, 0)座標開始定義一條新的子路徑
                ctx.moveTo(0, 0);
                // 旋轉弧度,需將角度轉換爲弧度,使用 degrees * Math.PI/180 公式進行計算。
                ctx.rotate((360 / num * i + 360 / num / 2) * Math.PI/180);
                // 繪製圓弧
                ctx.arc(0, 0, 150, 0,  2 * Math.PI / num, false);
                if (i % 2 == 0) {
                    ctx.fillStyle = '#ffb820';
                }else{
                    ctx.fillStyle = '#ffcb3f';
                }
                // 填充扇形
                ctx.fill();
                // 繪製邊框
                ctx.lineWidth = 0.5;
                ctx.strokeStyle = '#f48d24';
                ctx.stroke();

                // 文字
                ctx.fillStyle = '#fff';
                ctx.font="16px sans-serif";
                ctx.fillText(i + 1, 100, 60);

                // 恢復前一個狀態
                ctx.restore();
            }

            // 抽獎
            btn.onclick = function(){
                canvas.style.transform = 'rotate(1800deg)'; 
            }
        }, false);
    </script>
</body>
</html>