html5 canvas製作刮刮卡

下班後，閒著無事，剛好近期在學習畫布相關知識，就寫了個刮刮卡的demo練一下手，相容安卓、ios哦。高手路過，多多指點！

刮刮卡實現原理：

通過canvas繪製乙個，使用者手指觸發螢幕時，刮開當前一部分封面圖，從而顯示正文中的內容。整體運用canvas的globalcompositeoperation屬性來實現，關於globalcompositeoperation的用法，有不熟悉的，可以去這裡檢視。

簡單介紹一下頁面整體結構：

樣式：

1

html,body 
2.wrap 
3.page 
4.can  
5.index img

引用js：

下面， 詳細介紹一下關於scratch.js的具體實現思路與方法：

通過js閉包引用：

;(function($))(jquery);

首先，定義預設引數：

1

//預設引數
2var defaults =
9     };

核心邏輯：

說明：刮刮卡效果是借助canvas自身的屬性來編寫的，所以需要先獲取頁面中canvas物件，並建立2d繪圖環境。

var can = ths.get(0).getcontext('2d');

然後，建立image物件，img載入成功後，呼叫canvas的drawimage方法，繪製封面圖，並設定繪製的屬性，注意下文標部分**：

1

var img = new image();                                  //
建立物件
2                 img.src = slideimg;                                     //
新增路徑
3                 img.onload = function()

下面是slide方法，主要判斷手勢、繪製路徑與刮開層等效果。當touchend時，計算劃開畫素點，目標設定為刮開60%時，封面圖自動消失。注意下面標註部分**：

1

function
slide(o,c)else
15c.stroke();
1617                         o.on('touchmove.mo', function
(e))
2627                         o.on('touchend.mo', function
(e)35}36
37if(num>apx*percent), 1000, function
())43}44
45                             o.off('.mo');
46})
4748
})49
50                 }

至此，整個刮刮功能已講解完畢，感興趣的童鞋趕快試一試吧！如有問題，可以通過qq（863139978）聯絡。

刮刮樂canvas實現

class scratch config this.movenum 0 this.clearrange clearrange 2 this.canvasid canvasid this.radius radius 25 this.canvas this.canvasid this.ifend fal...

canvas 實現刮刮樂

在解決問題前，我們先來了解一下 canvas 標籤 canvas 是 html5 出現的新標籤，像所有的 dom 物件一樣它有自己本身的屬性 方法和事件，其中就有繪圖的方法，js 能夠呼叫它來進行繪圖。context是乙個封裝了很多繪圖功能的物件，獲取這個物件的方法是 var canvas docu...

總結canvas刮刮樂遊戲

1.刮了圖層後顯示隨機的背景圖，設計滑鼠抬起移動放下事件 2.利用新舊畫素合併的時候被擦掉 ctx.globalcompositeoperation destination out 3.快速移動會出現斷點，那就直接讓兩邊落下的地方連成線 4.利用getimagedata這個方法獲得裡面的data，d...