Canvas 刮刮卡引發(fā)的問題
效果
最近在寫一個移動端刮獎頁面出革，本身很簡單患蹂，網(wǎng)絡(luò)上也有許多過程壤躲，但有許多坑需要說一下。
'destination-out' 造成圖片無法渲染
網(wǎng)頁上的刮獎教程大部分的圖層都是固定顏色：
ctx.beginPath();
ctx.fillStyle = "silver"; //銀色圖層
ctx.rect(0, 0, width, height);
ctx.closePath();
ctx.fill();
但我做的刮層是小圖標(biāo)拼接的大圖片秘蛇，如果在一開始就設(shè)置
ctx.globalCompositeOperation = 'destination-out';
那么圖片和刮層的重合部分會消除其做，無法實(shí)現(xiàn)效果顶考。
解決方法：將設(shè)置寫在觸摸過程中
myCanvasObject.addEventListener(tapmove, function (event) {
var e = window.event || event;
if (isDown) { //判斷鼠標(biāo)是否按下
ctx.globalCompositeOperation = 'destination-out';
...
});
這樣只有觸摸后才會開始重合消除的功能
canvas 領(lǐng)獎按鈕被遮擋
刮完圖層后會顯示領(lǐng)獎按鈕，但canvasDOM元素遮擋了領(lǐng)獎按鈕妖泄。這時需要將canvasDOM元素從頁面中刪除驹沿。那么需要判斷圖層刮到某個程度（某個百分比）后將canvas元素刪除。這就需要獲取畫布中的所有像素蹈胡，像素的透明度小于某個值的時候就將判斷為透明渊季。這就需要使用 getImageData 方法
canvas getImageData方法跨域
為了獲取畫布中的所有像素，需要使用getImageData罚渐。然而canvas獲取圖片的像素信息時却汉，有跨域的問題：
瀏覽器報(bào)錯
解決辦法有：
- 服務(wù)端設(shè)置cors
然而一般不會僅為一張圖片就設(shè)置cors。 - 將圖片地址轉(zhuǎn)為base64的格式
利用canvas可以很方便的將圖片轉(zhuǎn)為base64格式
function getBase64(url){
var img = new Image(),
dataURL='';
img.src=url;
//確保圖片加載完成
img.onload=function(){
// 創(chuàng)建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'); //轉(zhuǎn)換圖片為dataURL
return dataURL;
};
}
觸摸坐標(biāo)偏移
我是利用e.touches[0]的pageX 和offsetLeft等進(jìn)行坐標(biāo)的獲取荷并，這是就不能在canvas的父元素設(shè)置position合砂，否則觸摸會出現(xiàn)錯位
