class scratch = config;
this.movenum = 0;
this.clearrange = clearrange || 2;
this.canvasid = canvasid;
this.radius = radius || 25;
this.canvas = $(this.canvasid);
this.ifend = false;
var img1 = './img/1.png';
var img2 = './img/2.png';
var img3 = './img/3.png';
var img4 = './img/4.png';
var img5 = './img/5.png';
var img6 = './img/6.png';
var img7 = './img/7.png';
var img8 = './img/8.png';
var jinbi1 = './img/jinbi1.png';
var money1 = './img/money1.png';
var nowin1 = [img1, img2, img3, img4, img5, img6, img7, img8, jinbi1];
var nowin2 = [img1, img2, img3, img4, img5, img6, img7, img8, money1];
var nowin3 = [img1, img2, img3, img4, img5, img6, img7, money1, jinbi1];
this.nowin = this.disorder([nowin1, nowin2, nowin3])[0];
this.getgold = [img1, img2, img3, img4, img5, img6, jinbi1, jinbi1, jinbi1];
this.getcash = [img1, img2, img3, img4, img5, img6, money1, money1, money1];
this.squeebox = $('.squeegeecontent span')
this.init();
}init()
bindevent()
winner()
rendersqueegeebg()
}getsqueespanbg(str) }}
disorder(arr)
return newarr;
}//初始化繪畫圖層
renderact() = this.config;
image.onload = () =>
};image.src = imgurl;
}/**
* 取消事件，以及**
*/offfn()
/*** touchstart事件
*/touchstart()
});}
/*** touchmove事件
*/touchmove()
});}
/*** touchend事件
*/touchend()
}$(this.canvasid).off('touchstart');
$(this.canvasid).off('touchmove');
$(this.canvasid).off('touchend');
});}
// 計算已經刮過的區域佔整個區域的百分比
getfilledpercentage()
}console.log((transpixels.length / (pixels.length / 4) * 100).tofixed(2))
return (transpixels.length / (pixels.length / 4) * 100).tofixed(2) + '%'
}// 設定閾值，去除灰色塗層
handlefilledpercentage(percentage) }}
//配置刮刮卡
new scratch(, false)
},start() ,
end()
});
canvas 實現刮刮樂
在解決問題前，我們先來了解一下 canvas 標籤 canvas 是 html5 出現的新標籤，像所有的 dom 物件一樣它有自己本身的屬性 方法和事件，其中就有繪圖的方法，js 能夠呼叫它來進行繪圖。context是乙個封裝了很多繪圖功能的物件，獲取這個物件的方法是 var canvas docu...
canvas實現刮刮樂的效果
很多 上都有刮刮樂的效果，這個呢，也不是很完善，大神們可以多提提意見喲！豌豆拜上 lang en charset utf 8 title canvas style head width 300 height 300 canvas src script var canvas document.quer...
總結canvas刮刮樂遊戲
1.刮了圖層後顯示隨機的背景圖，設計滑鼠抬起移動放下事件 2.利用新舊畫素合併的時候被擦掉 ctx.globalcompositeoperation destination out 3.快速移動會出現斷點，那就直接讓兩邊落下的地方連成線 4.利用getimagedata這個方法獲得裡面的data，d...