注本頭條號，專注做前端

轉盤抽獎這個在我們平時的前端項目中用到還挺多，用html5+canvas的方式來做我認為是最好的，支持移動端，今天分享的這個就是基于 html5+canvas實現，并且我還用到過幾次。

中獎概率，中獎提示，可抽獎次數，旋轉角度等等，都可以配置，非常實用

//

效演示

京東、阿里等大企業商城網站必備特效首次公開分享

HTML5/javascript課題：刮刮卡抽獎特效開發

知識點：HTML5/canvas高級繪圖標簽詳解，img圖片預處理

瀏覽器同源安全策略，鼠標事件，函數封裝等

天貓雙十一活動的時候，我們都記得參加過很多刮刮卡活動，還有支付寶的一些活動，比如花唄積分抽獎等等，可以說刮刮卡對于一個商城網站來說，是一個必備的游戲活動特效，對于前端學習和工作者來說，也是一個值得去研究的一個特效。

這個特效結合了HTML5以及javascript的知識點，更有canvas繪圖的一些技巧，在文末會分享本特效的一些源碼以及視頻，希望大家收藏！

HTML5刮刮卡特效視頻鏈接：javascript實現刮刮卡抽獎京東阿里大企業商城必備特效

HTML5刮刮卡特效源碼：

源碼滾動錄制

更多企業常用學習案例，項目實戰以及完整源碼請進前端學習交流群：470593776

IT時報 孫妍

1999年，他用HTML5寫了一個棋牌類游戲平臺，令他3個月內賺了300萬。之后，他又開發了國內三大休閑游戲平臺之一的可樂吧，他就是Layabox的CEO謝成鴻。Layabox是一家為Flash程序員開發HTML5提供技術解決方案的公司，簡單地說，借助Layabox的解決方案，程序員可以直接在Flash環境下開發大型的重度HTML5游戲。

2010年，趙霏開始第二次創業——磊友科技，從手游行業轉向HTML5，就是因為喬布斯的一句話：“移動時代是低功耗設備、觸摸屏界和開放網絡標準的時代，Flash已經落伍。”在蘋果、Facebook等科技巨頭們紛紛加入HTML5行業之時，趙霏和他的團隊開始著力開發HTML5的解析引擎和手機瀏覽器，同時也被李開復相中，成為創新工場孵化的第一個HTML5項目。

然而，到了2012年，HTML5從技術支持到產品都不見成效，自身的標準制定也分成了兩派，Facebook創始人馬克·扎克伯格更公開宣布放棄HTML5。這一年，趙霏和他的團隊把重心都放在了開發大型手機HTML5網頁游戲上。

2013年，磊友科技陸續推出的5款HTML5游戲都沒有獲得成功，團隊不斷有人出走，一直籠罩在“散伙”的陰影下。有的轉去做代計費的，有的轉去做iOS和Android開發，有的甚至離開了這個行業。幾近凋蔽，團隊只剩下了兩三個“元老”，但是趙霏仍舊沒有放棄HTML5。

HTML5就這樣一直在冰火兩重天里游走，誰也沒有想到，就在2014年8月，一個HTML5的小游戲《圍住神經貓》在微信朋友圈一夜爆紅，而南京泥巴怪公司其實只是為了拉點用戶，花了一天功夫就將它做了出來。自此以后，HTML5的“卡片”廣告、邀請函、互動游戲在朋友圈里盛傳，不管是營銷公司、游戲公司還是風投，都跟風研究起HTML5。

風口大型游戲借HTML5顛覆App？

近期，幾家游戲引擎公司、數據公司和分發平臺都紛紛發聲，預測HTML5游戲將在今年爆發。然而就輕量的HTML5游戲來說，繼《圍住神經貓》之后，就沒有再出現有一定影響力的游戲。而且，《圍住神經貓》一直為人詬病的就是，生命周期短，沒法將流量變現，而這兩點恰恰是游戲的命脈。

在謝成鴻看來，HTML5游戲的前景在于大型游戲。

但問題就來了，大型的HTML5游戲需要有高性能的瀏覽器適配，如若不然，卡頓、發熱就會成為硬傷，目前看來還沒有瀏覽器可以順暢地跑大型游戲。于是，就衍生出了做HTML5加速器的公司，Cocos、白鷺引擎和謝成鴻的Layabox儼然成三足鼎立之勢。

“Cocos和我們主要針對較大的游戲開發者，白鷺引擎主要面向小開發者，在HTML5游戲潛在客戶里，我們已經占有一半左右。”謝成鴻說道。據悉，國內20家主流頁游廠商中，已經有三分之一與Layabox合作。

“大型HTML5游戲在普通瀏覽器上跑不動，這是最大的問題。”他說。于是，Layabox就做出了一套針對HTML5生態鏈的整體解決方案。

目前，Layabox有三個主要業務方向，在開發者端，基于Flash的開發環境較為成熟，所以Layabox為開發者提供在Flash環境下開發大型HTML5游戲的解決方案，夸張一點的理解就是一鍵轉換；在瀏覽器適配問題上，Layabox開發了自家的加速器，可以讓微信這樣的流量平臺也可以跑得動大型頁游。

幾年前，趙霏和他的團隊也都認為，PC上既然經歷了從端游到頁游的趨勢，說明用戶有使用場景上的需求，那么在移動設備上，應該也會有從App向HTML5轉移的傾向。在解決卡頓和發熱的前提下，畢竟HTML5游戲不用下載安裝，比起App更加方便，而且營銷成本將近比App要低10倍。

難道HTML5真的能顛覆App？經過幾年的試水，趙霏開始不看好大型HTML5游戲在移動端的前景。因為他發現，用戶在手機上玩大型游戲時，還是會傾向于App。“用戶體驗的時間和場景都是不對的，舉個簡單的例子，當你想再玩一次HTML5網頁游戲時，會發現很難找到入口，但App至少在桌面上有個圖標。”他對《IT時報》記者說道。

模式流向變現還得傍上O2O

在海底撈，最壯觀的場景就是排隊等食，雖然已經使出了免費美甲、免費擦鞋等招數，但仍舊沒有緩解食客因為排隊而流失的情況。

這倒是激發了趙霏的靈感，于是磊友科技就為海底撈設計了一個HTML5的游戲營銷方案。食客在排隊時，可以通過掃描二維碼玩一個小游戲，如果能榮登排行榜，就可以領取海底撈的代金券。

今年1月份，這個HTML5游戲上線，在北京10家海底撈分店進行試玩，結果顯示，20%～30%的食客愿意參與進來，達到了30萬人次的訪問。

從海底撈的成功案例開始，寶潔、可口可樂、旺旺等公司都踏進了趙霏的門檻，目前已有將近100家企業讓他們定制游戲。一般這些小游戲都會被植入商家的微信公眾號內，玩游戲并分享至朋友圈來贏取代金券，又是用積分抽獎等方式幫電信運營商消耗積分。

那么，怎么解決用戶留存的問題呢？“HTML5的游戲營銷最重要的是考慮使用場景，比起橫幅、彈窗等互動性不強的移動營銷模式，效果更好。”趙霏說。

一般來說，在外面消費時，HTML5就顯示出了不用下載安裝的優勢。到酒店先連Wi-Fi是一個常見的使用場景，客人可以直接掃二維碼自動關注酒店微信號，同時取得連接Wi-Fi的權限，然后就能點開公眾號里的菜單，玩游戲贏取附近餐廳的代金券。

趙霏認為，HTML5小游戲如何能使流量變現，開發團隊應該換個思路，“之前我們做大型HTML5游戲時，考慮的是怎么從用戶那賺錢，通關、買裝備等。現在從2C到2B，考慮的是怎么讓企業買單。社交性比較強，能使線上線下聯動的游戲更有市場。”

結合了HTML5和O2O兩個熱點之后，對趙霏來說，上門找融資已經不是一件難事了。他透露，今年六七月份，磊友科技就有B輪融資的計劃。

缺口工具和人才

趙霏曾談道：“研發完全自主內核的瀏覽器引擎的難度不亞于一個操作系統。”最后，由于很難追趕蘋果Safari瀏覽器迭代速度等壁壘，他和團隊就放棄了HTML5瀏覽器引擎的商用，現在只用于團隊內部開發。

謝成鴻略帶自信地談道，“HTML5開發最大的問題就是工具的缺乏，因為它沒有像Flash一樣，有可控的開發語言，有成熟的開發環境。我們做Flash轉HTML5的解決方案就是想解決這些問題。”

HTML5缺乏成熟開發環境的表現之一，就是開發人才的缺失。上個月，招聘網站拉勾網發布報告顯示，HTML5開發成為了“職位多，人才少”的熱門崗位。就目前招聘的開發者市場水平來看，擁有1年左右工作經驗的HTML5程序員，月薪基本在2～3萬，然而，擁有4到5年工作經驗的AS程序員（基于Flash開發），月薪卻只有1.5萬。

“前盛大游戲CEO凌海的團隊，從去年到現在，竟然招不到一個專精于HTML5的程序員。這些天，他團隊的程序員就在我們這兒學習HTML5開發技術。”謝成鴻說道。