实现思路
用canvas画三层,
最下面的一层为奖品图片
中间一层为灰色的刮卡层
最上面一层是用户的滑动范围
利用canvas的destination-out 让相加的部分变透明
//只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过
Canvas里的globalCompositeOperation
js代码
class RafflePages extends BaseClass {
constructor(str) {
super(str);
}
init() {
super.init();
this.ctx = '';
this.canvas = '';
this.img = '';
this.isused = 0;
}
hide(){
super.hide();
this.$dom.find('#guaguakas').hide();
}
show(flag) {
super.show();
if(flag){
this.$dom.find('#guaguakas').show();
this.showCard();
this.isused = 0;
}
// this.num = Math.random();
// this.randomPage();
// this.$dom.find('.reset').on('tap',()=>{
// this.reset();
// })
}
showCard() {
this.img = new Image();
this.canvas = document.querySelector('#guaguakas');
// this.canvas.style.backgroundColor = 'transparent';
// this.canvas.style.position = 'absolute';
var w = this.$dom.find('.intergation').innerWidth()+1;
var h = this.$dom.find('.intergation').innerHeight()+1;
this.canvas.width = w;
this.canvas.height = h;
var self = this;
this.img.addEventListener('load', function (e) {
var w = self.img.width / 1.75,
h = self.img.height / 1.75;
var mousedown = false;
function layer(ctx) {
ctx.drawImage(self.img, 0, 0, self.canvas.width, self.canvas.height)
}
function eventDown(e) {
e.preventDefault();
mousedown = true;
}
function eventUp(e) {
e.preventDefault();
mousedown = false;
self.autoClear();
}
function eventMove(e) {
e.preventDefault();
if (mousedown) {
if (e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1];
}
var offsetX = $('#guaguakas').offset().left,
offsetY = $('#guaguakas').offset().top;
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
self.ctx.beginPath();
self.ctx.arc(x, y, 15, 0, Math.PI * 2);
self.ctx.fill();
}
}
// self.canvas.width = self.$dom.find('.scratchBg').width() * 0.9;
// self.canvas.height = self.$dom.find('.scratchBg').height() * 0.8;
self.ctx = self.canvas.getContext('2d');
self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
self.ctx.fillStyle = '#f0f8eb';
self.ctx.fillRect(0, 0, w, h);
layer(self.ctx);
//destination-out 只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过
self.ctx.globalCompositeOperation = 'destination-out';
self.canvas.addEventListener('touchstart', eventDown);
self.canvas.addEventListener('touchend', eventUp);
self.canvas.addEventListener('touchmove', eventMove);
});
if(localStorage.getItem('share')){
self.img.src = 'resources/img/intergation6.png';
}else{
self.img.src = 'resources/img/intergation7.png';
}
// self.img.src = 'resources/img/intergation6.png';
}
autoClear() {
var self = this;
if(self.isused==0){
self.showPage();
self.isused=1;
}
//当剩余未刮开的小于X%时自动刮开余下的部分
var data = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
for (var i = 0, j = 0; i < data.length; i += 4) {
if (data[i] && data[i + 1] && data[i + 2] && data[i + 3]) {
j++;
}
}
if (j <= this.canvas.width * this.canvas.height * 0.4) {
self.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// setTimeout(function () {
// self.showPage();
// }, 500);
self.$dom.find('#guaguakas').hide();
return;
}
}
reset() {
this.ctx.globalCompositeOperation = 'source-over';
this.ctx.drawImage(this.img, 0, 0, this.canvas.width, this.canvas.height);
this.ctx.globalCompositeOperation = 'destination-out';
}
randomPage() {
// var self = this;
// $.ajax({
// url: `${Config.server}/lottery/${Config.visitor.openId}`,
// type: 'GET',
// success: function (res) {
// if (res.code != 0) {
// return;
// }
// if (res.data.status == 0) {
// self.$dom.find('.unluckContainer').show();
// } else if (res.data.status == 1) {
// self.$dom.find('.luckContainer').show();
// }
// // //console.log(res.data);//0未中奖,1中奖,
// Config.visitor.isLucky = res.data.status;
// }
// })
}
showPage() {
var self = this;
// this.$dom.find('#guaguakas').hide();
$.ajax({
url: config.server + `/lottery/${currentMacket.drawnInfo.id}/${config.userInfo.openid}`,
type: 'PUT',
data: {id:currentMacket.drawnInfo.id,openid:config.userInfo.openid},
success: function(res){
self.isused=1;
},
error: function(error){
}//error结束
});
}
}
module.exports = RafflePages;
html
<canvas id="guaguakas" class="canvas2" ></canvas>