Canvas 刮刮卡引發的問題
效果
最近在寫一個移動端刮獎頁面，本身很簡單，網絡上也有許多過程，但有許多坑需要說一下。
'destination-out' 造成圖片無法渲染
網頁上的刮獎教程大部分的圖層都是固定顏色：
ctx.beginPath();
ctx.fillStyle = "silver"; //銀色圖層
ctx.rect(0, 0, width, height);
ctx.closePath();
ctx.fill();
但我做的刮層是小圖標拼接的大圖片，如果在一開始就設置
ctx.globalCompositeOperation = 'destination-out';
那么圖片和刮層的重合部分會消除，無法實現效果。
解決方法：將設置寫在觸摸過程中
myCanvasObject.addEventListener(tapmove, function (event) {
var e = window.event || event;
if (isDown) { //判斷鼠標是否按下
ctx.globalCompositeOperation = 'destination-out';
...
});
這樣只有觸摸后才會開始重合消除的功能
canvas 領獎按鈕被遮擋
刮完圖層后會顯示領獎按鈕，但canvasDOM元素遮擋了領獎按鈕。這時需要將canvasDOM元素從頁面中刪除。那么需要判斷圖層刮到某個程度（某個百分比）后將canvas元素刪除。這就需要獲取畫布中的所有像素，像素的透明度小于某個值的時候就將判斷為透明。這就需要使用 getImageData 方法
canvas getImageData方法跨域
為了獲取畫布中的所有像素，需要使用getImageData。然而canvas獲取圖片的像素信息時，有跨域的問題：
瀏覽器報錯
解決辦法有：
- 服務端設置cors
然而一般不會僅為一張圖片就設置cors。 - 將圖片地址轉為base64的格式
利用canvas可以很方便的將圖片轉為base64格式
function getBase64(url){
var img = new Image(),
dataURL='';
img.src=url;
//確保圖片加載完成
img.onload=function(){
// 創建canvas元素
var canvas = document.createElement("canvas"),
// 確保canvas的尺寸和圖片一樣
width=Img.width,
height=Img.height;
canvas.width=width;
canvas.height=height;
canvas.getContext("2d").drawImage(Img,0,0,width,height); //將圖片繪制到canvas中
dataURL=canvas.toDataURL('image/jpeg'); //轉換圖片為dataURL
return dataURL;
};
}
觸摸坐標偏移
我是利用e.touches[0]的pageX 和offsetLeft等進行坐標的獲取，這是就不能在canvas的父元素設置position，否則觸摸會出現錯位
