最近朋友做html5营销页挺多的,想着一直写js,html5的东西也好久没写过了。今天就来折腾一下,看看canvas的东西,然后想到刮刮乐效果。这个以前同事也分享过,不过时间太久,也忘记了。
熟悉PS的话,就很清楚图层的概念。刮刮乐就是两个图层,奖项图层在下面,上面盖一层灰色的遮住。挂掉灰色图层,镂空显示出下面的奖项图层。
根据html的canvas手册实验了几下,发现不能清除画的某个图案,会直接把画布上的所有图案都擦掉。如此奖品图就不能放到画布里了,放到canvas背景图上,这样就不怕被擦掉了。
做这个效果的关键在canvas的一个合成属性上,globalCompositeOperation
。
globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
globalCompositeOperation详细说明见下面链接:
http://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp
方法步骤:
- 设置画布;
- 通过随机数设置奖项图片,图片作为画布的背景图。
- 画布上画一个同画布大小的灰色矩形覆盖住。
- 在画布上绑定touch事件,做刮除效果。
- 当刮掉的区域超过一定范围后,直接清楚所有蒙层,展示奖项图片。
示例代码:
html:
<div class="canvas"><canvas id="canvas"></canvas></div>
js代码:
class HappyScrapeCards{
constructor(){
this.width = 300;
this.height = 100;
this.area = this.width * this.height;
this.left = 0;
this.top = 0;
this.prize = Math.floor(Math.random()*4);
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
this.init();
this.bindEvent();
}
init(){
let width = this.width,
height = this.height;
this.canvas.width = width;
this.canvas.height = height;
this.left = this.canvas.offsetLeft;
this.top = this.canvas.offsetTop;
this.canvas.style.background = `url('./imgs/${this.prize}.gif') no-repeat center`;
this.ctx.fillStyle = '#ccc';
this.ctx.fillRect(0,0,width,height);
this.ctx.globalCompositeOperation = 'destination-out';
}
bindEvent(){
this.canvas.addEventListener('touchmove', this.scrapeCard.bind(this));
this.canvas.addEventListener('touchend', this.calcScrapeNum.bind(this));
}
offEvent(){
this.canvas.removeEventListener('touchmove', this.scrapeCard.bind(this));
this.canvas.removeEventListener('touchend', this.calcScrapeNum.bind(this));
}
scrapeCard(e){
let touch = e.touches[0];
let x = touch.clientX,
y = touch.clientY;
this.ctx.beginPath();
this.ctx.arc(x - this.left, y - this.top, 15, 0, Math.PI * 2);
this.ctx.fill();
}
calcScrapeNum(){
let scrapeNum = 0;
let data = this.ctx.getImageData(0,0,this.width,this.height).data;
for(let i = 3; i< data.length; i += 4){
if(data[i] === 0){
scrapeNum++;
}
}
if(scrapeNum > this.area * 0.8){
this.ctx.clearRect(0,0,this.width,this.height);
this.offEvent();
}
}
}
new HappyScrapeCards();
转载请注明带链来源:春语精椿