實現方法：
（1）利用canvas畫布，fillRect()描繪出一個矩形（不是透明），定位蓋在某個標簽如div上面（這個標簽寫著中獎的信息）
（2）globalCompositeOperation = 'destination-out';利用此屬性，手指劃過畫布，arc(x,y, radius, 0, Math.PI*2, true)繪畫圓形，那麼這個圓形會把之前描繪出的矩形穿透，看到div標簽的內容
globalCompositeOperation屬性：
globalCompositeOperation 屬性設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上。
源圖像 = 您打算放置到畫布上的繪圖。
目標圖像 = 您已經放置在畫布上的繪圖。
如下圖，藍色是目標圖像（就是矩形），紅色就是源圖像（即手指劃過的圓形）
從圖中可以看出，globalCompositeOperation = 'destination-out'就是我們要的屬性
例子完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.linuxidc.com</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style type="text/css">
.wraper{width: 300px;height: 100px;position: relative;margin: 150px auto;}
.inner{width: 300px;height: 100px;background: #AA0707;color: #fff;font-size: 36px;line-height: 100px;text-align: center;}
#j_canvas{position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<div class="wraper">
<div class="inner">恭喜您中獎www.linuxidc.com</div>
<canvas id="j_canvas" width="300" height="100"></canvas>
</div>
<script type="text/javascript">
var scratchGame = (function(){
var target = document.getElementById('j_canvas'),
ctx = target.getContext('2d'),
w = target.width,
h = target.height,
radius = 15,
target_offset_x = target.getBoundingClientRect().left,
target_offset_y = target.getBoundingClientRect().top,
isTouch = false;
return{
init:function(){
ctx.fillStyle = '#999';
ctx.fillRect(0, 0,w,h);
//屬性設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上。
ctx.globalCompositeOperation = 'destination-out';
// 事件
target.addEventListener('touchstart', this.eventDown,false);
target.addEventListener('touchmove', this.eventMove,false);
target.addEventListener('touchend', this.eventUp,false);
},
eventDown:function(e){
e.preventDefault();
isTouch = true;
},
eventUp:function(e){
e.preventDefault();
isTouch = false;
},
eventMove:function(e){
e.preventDefault();
if(!isTouch||!e.touches.length) return;
var touch = e.touches[0],
x = touch.pageX - target_offset_x,
y = touch.pageY - target_offset_y;
ctx.beginPath();
ctx.arc(x,y, radius, 0, Math.PI*2, true);
ctx.fill();
}
}
})();
scratchGame.init();
</script>
</body>
</html>
--------------------------------------分割線 --------------------------------------
HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm
HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm
HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm
HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm
HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm
《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm
關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm
HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm
--------------------------------------分割線 --------------------------------------
