HTML5實作刮獎效果

要實作刮獎效果，最重要的是要找到一種方法：當刮開上層的塗層是就能看到下層的結果。而HTML5的canvas API中有一個屬性globalCompositeOperation，這個屬性有多個值，而實作刮獎效果要用到的值就是destination-out。意思就是：在已有内容和新圖形不重疊的地方，已有内容保留，所有其他内容成為透明。這樣可能不好了解，後面實作的時候會解釋。有了globalCompositeOperation這個屬性，實作過程就很簡單了。

我們需要有兩個層，上面一層肯定是一個canvas元素，因為要能刮開就要用到畫布。下面一層其實用什麼元素都可以，既然上層用的是canvas元素，下層我們也用canvas元素，下面是html内容：

先實作一個構造函數：

在下層畫布上畫上刮獎的内容：

這邊獎的内容是随機出現的，因為獎肯定有很多種，可以用一個數組來存放獎的内容，然後随機顯示：

然後在上層畫布中畫一層塗層：

在上層畫布中用了globalCompositeOperation這個屬性，當再在畫布上畫東西時，那麼後面畫的内容和塗層重合的部分将變透明，而其餘塗層部分不變。就是利用了這個原理實作了刮獎效果。

需要刮開上層的塗層，就需要在上層畫布上綁定事件：

我們需要在刮到一定程度時提醒刮獎的結果：

上面用到了getImageData()方法，這個方法傳回像素資料。重要的是我們隻是擷取了下層文字部分的像素資料，因為我們隻需要知道刮開的文字部分占全部文字部分的百分比。

調用構造函數時，把可能改變的東西放在一個對象options中傳遞給構造函數：