HTML5 Canvas繪製轉盤抽獎

来源:http://www.cnblogs.com/givebest/archive/2016/03/19/5296335.html
-Advertisement-
Play Games

簡單介紹了HTML5 Canvas的來歷、瀏覽器相容性，主要內容是如何實現轉盤抽獎，最後的DEMO非常簡陋，真實場景還會有很多需要考慮和改進的地方(比如：瀏覽器首碼)，這裡只講一步步實現的思路。


下麵簡單介紹了HTML5 Canvas的來歷、瀏覽器相容性，主要內容是如何實現轉盤抽獎，最後的DEMO非常簡陋，真實場景還會有很多需要考慮和改進的地方(比如：瀏覽器首碼)，這裡只講一步步實現的思路。

HTML5 Canvas

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

瀏覽器支持

瀏覽器支持

查看詳細瀏覽器支持

相容舊版IE可使用:

1 . ExplorerCanvas Github, Google Code

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

2 . FlashCanvas

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

Canvas API

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

抽獎轉盤

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>

轉載請註明出處：http://www.cnblogs.com/givebest/p/5296335.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • AngularJS中的指令
    說到AngularJS，我們首先想到的大概也就是雙向數據綁定和指令系統了，這兩者也是AngularJS中最為吸引人的地方。雙向數據綁定呢，感覺沒什麼好說的，那麼今天我們就來簡單的討論下AngularJS這個框架的指令系統，本人也是初學，查閱了一些資料，要是有一些說的不好的地方，各位看官一笑而過便是，
  • HTML5播放暫停音樂
    查看效果：http://hovertree.com/code/jquery/ueyf7gn4.htm 代碼如下： 更多特效：http://www.cnblogs.com/roucheng/p/texiao.html
  • jQuery 源碼解析一：jQuery 類庫整體架構設計解析
    如果是做 web 的話，相信都非要對 Dom 進行增刪查改，那這相信大家都或多或少接觸到過 jQuery 類庫，其最大特色就是強大的選擇器，讓開發者脫離原生 JS 一大堆 getElementById、getElementsByName...官方提供超長方法 api 。 jQuery 整體源碼，本人
  • javaScript中的數組迭代方法
    ECMAScript5為數組定義了5個迭代方法。 每個方法都接收兩個參數：要在每一項上運行的函數 和 （可選的）運行該函數的作用域對象。 傳入這些方法中的函數會接收三個參數：數組項的值，該項在數組中的位置，數組對象本身。 請看以下例子：
  • javascript的封裝實例
    StringBuffer方法的js自定義封裝： <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author"
  • Bootstrap之表單控制項狀態
    Bootstrap中的表單控制項狀態主要有三種：焦點狀態，禁用狀態，驗證狀態。 一、焦點狀態：該狀態告訴用戶可輸入或選擇東西 焦點狀態通過偽類“:focus”以實現。 bootstrap.css相應源碼
  • jQuery學習筆記(3)-操作jQuery包裝集的函數
    一、前言 在使用jQuery選擇器獲取到jQuery包裝集後，我們就要對這些包裝集進行各種操作 二、創建新的元素 1.使用HTMLDOM創建元素 (1)什麼是DOM 當網頁被載入時，瀏覽器會創建頁面的文檔對象模型(Document Object Model) (2)使用HTML DOM創建元素 1 ...
  • Javascript的封裝
    js的封裝分為以下幾種模式： 工廠模式，代碼如下： <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" co
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類