使用html5+javascript+emoji，做了一個給小孩玩的刮刮樂小遊戲，讓他們學習簡單的英文單字。如果在chrome上使用，還可以利用tts英文發音唸出單字，讓小孩也能練習英文聽力及發音。 玩 / Android / Github 底下是開發這個遊戲的一些技術重點紀錄。 1，刮刮樂的部分是使用html5的canvas製作。原理是使用兩個canvas，一個作底圖圖層(c0)，一個做為可被刮除的前景遮罩圖層(c1)，c1預設不可見為一記憶體圖層。把c0的原始圖型內容事先存起來作為後續更新使用，並在c0上安裝onmousedown,onmouseup及onmousemove，滑鼠滑動時以在c1上畫粗直線的方式模擬出刮除效果，然後再以新的c1前景遮罩結合事先儲存的c0底圖重新合併更新畫面，這樣就能作出刮刮樂的效果。 c1上的刮除效果是利用將2d context的globalCompositeOperation設為'destination-out'模式，並且strokeStyle設為'rgba(0,0,0,1)'，以這樣子的設定在c1上畫線時，得到的是一個擦除的效果，這樣就作到刮刮樂刮除的效果。 c0.onmousemove = function(e) { if (mouse_down) { ctx1.strokeStyle = 'rgba(0,0,0,1)'; ctx1.globalCompositeOperation = 'destination-out'; ctx1.lineWidth = 18; ctx1.lineCap = 'round'; ctx1.beginPath(); ctx1.moveTo(last_x, last_y); ctx1.lineTo(x, y); ctx1.stroke(); last_x = x; last_y = y; updateCanvas(); ...