刮刮卡製做思路--canvas

刮刮卡demo圖樣

1.刮開塗層的繪製

能夠是畫圖，把塗層畫上去

var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'path/to/my/image.jpg';

能夠是是畫灰色的區域

context.rect(x, y, width, height);
context.fill();
context.stroke();

2.刮開圖像的繪製

須要用到canvas的這個屬性globalCompositeOperation ，合併圖像。
畫一個新的源圖像到已經畫好的目標圖像上面。利用destination-out值達到下面的效果,就像是擦去目標圖像的圖案同樣。

context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';

3.事件設置思路

有三個事件回調方法，down_fn,move_fn,up_fn.
當按下事件觸發的時候，開關打開，同時設置移動事件和鬆開事件
而後當鬆開事件觸發的時候就移除三個事件的設置。

注意

• 1.須要在開始作一個回調事件執行一次的開關處理，當第一次移動的時候就觸發回調，而且關閉開關，避免每次移動都會觸發回調事件
• 2.canvas的globalCompositeOperation屬性須要在每次繪製完圓的時候，再重置回默認屬性，不然二次繪製的時候繪製上去的是透明的圖層
  
• 3.文字須要作居中處理，能夠使用textAlign作水平居中處理或者textBaseline作垂直居中處理

附錄連接

1. HTML5畫布速查表