繼上篇翻翻樂之后，又來刮刮樂。還是先上效果圖：
開始demo的世界：
1.css去繪制界面效果。（源碼提供）
2.原理：要實現刮刮卡內容的出現，我用div做了背景層去顯示刮出的內容結果【重點】。中間Canvas區域去實現刮刮的效果。
3.構建界面效果,背景層zj為掛出效果。Canvas去做動畫
1 <div class="zj"> 2 <canvas id="CanvasLe" width="280" height="140" style="margin-top:10px;"></canvas> 3 </div> 4 5 <style>.zj{background:url("zj.png") no-repeat ;}</style>
4.開始動畫
先繪制 ‘灰色’ ，然后在鼠標的移動事件Canavas.onmousemove去計算 滑動的坐標值，然后clearRect方法去清除該坐標的色素。
1 window.onload = function(){ 2 init(); 3 } 4 var imageWidth = "280"; 5 var imageheight = "140"; 6 function init(){ 7 //定義繪畫寬 高 8 9 //定義Canvas對象 10 var Canavas = document.getElementById("CanvasLe"); 11 var Context2D = Canavas.getContext("2d"); 12 13 var bool =true; 14 Context2D.fillStyle='#cccccc'; //設置覆蓋層的顏色 15 Context2D.fillRect(0,0,imageWidth,imageheight); //設置覆蓋的區域 16 //增加Canvas鼠標滑動事件 17 Canavas.onmousemove = function(e) { 18 var canvasOffset = $(Canavas).offset(); 19 var canvasX = Math.floor(e.pageX - canvasOffset.left); 20 var canvasY = Math.floor(e.pageY - canvasOffset.top); 21 canvasY += parseInt(imageheight); 22 lottery(canvasX,canvasY,Context2D); 23 } 24 } 25 //刮刮函數 26 function lottery(x,y,c){ 27 c.clearRect(x,y-imageheight,20,20); 28 }
好了，效果很明顯可以根據滑動坐標清除色素塊。
要是在移動手機設備上運行以上還不行，還需要加入觸屏滑動事件touchmove。接下來就給去監聽這個事件
1 Canavas.addEventListener('touchmove', function(event) { 2 // 如果這個元素的位置內只有一個手指的話 3 if (event.targetTouches.length == 1) { 4 event.preventDefault();// 阻止瀏覽器默認事件，重要 5 var touch = event.targetTouches[0]; 6 // 把元素放在手指所在的位置 7 var canvasOffset = $(Canavas).offset(); 8 var canvasX = Math.floor(touch.pageX - canvasOffset.left); 9 var canvasY = Math.floor(touch.pageY - canvasOffset.top); 10 lottery(touch.pageX,touch.pageY,Context2D); 11 } 12 }, false);
ok，大功告成。實現了刮刮卡的效果。
各位園友們可以進一步擴展，共同學習是進步的階梯。
補充:謝謝各位園友的指出，趕緊修復源碼。
測試都通過，遇到一個問題在 IE11中 background:url("s_bd.jpg") 為什么無效果，請各位高手給我指點指點，先謝謝
源碼猛擊 這里[修復]