HTML5的canvas畫布實現刮刮卡原理
隨著移動端網頁的發展，一些新流行的特別效果也應運而生，比較火的刮刮樂效果經常用在一些支付完成後領取獎勵的頁面，今天就給大家分享一個基於HTML5技術實現的刮刮卡效果。
要用到HTML5的畫布Canvas。什麼是Canvas呢？先來給大家講解下：
HTML5 <canvas> 元素用於圖形的繪製，通過腳本 (通常是JavaScript)來完成。
<canvas> 標籤只是圖形容器，您必須使用腳本來繪製圖形。
創建畫布的方法：
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 標籤通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小.
你可以在HTML頁面中使用多個 <canvas> 元素。可以給你設定的canvas添加各種樣式！
知道畫布的方法後，下面就來解決刮刮卡的效果：
效果圖：
創建一個300X200的canvas畫布
javascript代碼 :
鼠標操作事件：
相關推薦
'新三界模式究竟是刮骨療毒還是自我斷臂？玩家侃侃而談'
"“新三界模式”會隨著時間推移不斷展現其威力，特別是對老區全滿號而言，殺傷範圍極廣。近期比例上漲，多是老玩家都知道，道人快來了，趕緊秒多點菜秒獸決。也有不少玩家囤幣囤功績，準備大撈一筆。就往年而言，道人在到來的前一天，菜價會大漲，之後就迅速滑落。今年與往年不同的是，現在是三...
'PPT畫布之外，還有意想不到的妙用！賭五毛錢你不知道這些點'
"當我們打開一個PPT時，我們的注意力會自動集中到中間大塊區域，也就是PPT的頁面上。排版、佈局……我們在PPT上絕大多數動作，都集中在這塊區域。不過，被我們忽略的頁面外灰色區域，也有妙用！因為播放PPT時，不會顯示頁面外灰色區域，所以我們可以在這一區域放各種東西來提升效率...
'80%的人都忽略了PPT畫布之外的用法，但這6點真的很實用'
"當我們打開一個PPT時，我們的注意力會自動集中到中間大塊區域，也就是PPT的頁面上。排版、佈局……我們在PPT上絕大多數動作，都集中在這塊區域。不過，被我們忽略的頁面外灰色區域，也有妙用！因為播放PPT時，不會顯示頁面外灰色區域，所以我們可以在這一區域放各種東西來提升效率...
'王者銳雯教你三段Q過厚牆，看似不可能變為可能，原理參照卡牆眼'
"王者銳雯教你三段Q過厚牆，看似不可能變為可能，原理參照卡牆眼！銳雯這個英雄從登場以來就得到了玩家們的喜愛，靈動的技能，爆發的傷害。可以說是集中了戰士所有的優點，控制，輸出，位移，護盾，爆發應有盡有，但是由於最近幾個版本的改版，讓銳雯一直很難登入賽場。但是這也不能抵消玩家們...
'JavaScript實現第三方登錄網站原理在這呢'
"點關注，不迷路，每天更新大量前端資料前端實現第三方登錄之OAuth2.0協議OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。授權碼模式（authorization-code）簡化模式（implic...
《絕地求生》G港5分鐘神裝快遞員，全圖最肥的搜刮路線全在這
位置分佈首先我們來看看該路線的具體位置G港東北部分大家肯定都這麼想那裡樓又矮又小，拼圖樓還沒有樓頂，肯定窮然而去搜了兩圈，尼克的臉都腫了真這麼肥，沒有你咬...
html5 canvas系列教程-像素操作（反色，黑白，亮度，復古，蒙版，透明）
getImageData：獲取一張圖片的像素數據cxt.getImageData( x, y, width, height )x：圖片所在的x座標y: 圖...
html5的Canvas技術實現簡易繪畫板
本例說說用html5的Canvas技術實現簡易繪畫板以往也用canvas劃過繪畫布局，今次在原來的基礎上加上一些能選擇的功能，比如筆頭的大小、繪畫的形狀、...
用HTML5的canvas來畫一個夢幻星空，來學習一下吧
前言隨著HTML5的火熱，越來越多的人投入到HTML5開發中了，canvas作為HTML5中比較重要的一個元素，在很多官網的主頁面中被使用到。今天我們一起...
就因為程序員利用html5/svg畫唐老鴨，公司設計都被辭退了
HTML5 SVG唐老鴨，SVG生成的卡通效果，是不是很像呢，不要以這是一張設計好的圖片哦，本效果中任何圖片都沒有用到，只是用到了HTML5中的SVG技術...
HTML5基礎知識（2）初識canvas、svg、地理定位和新語義元素
本節主要簡單講解canvas、svg、地理定位和新語義元素HTML 5 Canvascanvas 元素用於在網頁上繪製圖形。HTML5 的 canvas ...
應用HTML5 Canvas製作酷炫科技背景動畫特效
更多特效代碼請添加HTML5前端交流群111645711看這性感的線條，激情的律動！廢話不多說，上代碼！源代碼<!DOCTYPE html PUBL...
HTML5動畫原理和HTML5動畫製作工具
HTML5不是一個新的現象，但HTML5的使用在過去幾年中已經有了飛速的發展。當涉及到富媒體，運動圖形和網絡上的互動內容時，HTML5幾乎完全取代了Fla...
推薦中...