HTML5 Canvas实现图片擦除效果
前段时间有一个需求说是要实现一个类似于刮刮卡的效果,但是因为我之前并没有见过这个效果,所以我并没有想象出前端如何来实现这个效果。直到前两天他们给我看了一个案例,我才知道真的可以实现。但是扒下来代码之后发现在HTML方面似乎给的很简单,就是两个图层。真正实现是在JS里。于是我看到Canvas就了然了,因为这一部分我的接触基本为零。于是我开始搜索这个图片擦除的实现方式,终于让我找到了两个比较清晰的讲解,特地贴上来留以备用。
原理很简单,就是在刮奖区添加两个canvas,第一个canvas用于显示刮开后显示的内容,可以是一张图片或一个字符串,第二个canvas用于显示涂层,可以用一张图片或用纯色填充,第二个canvas覆盖在第一个canvas上面。当在第二个canvas上点击或涂抹(点击然后拖动鼠标)时,把点击区域变为透明,这样就可以看到第一个canvas上的内容,即实现了刮奖效果。
案例一:http://www.tuicool.com/articles/EBveqe
案例二:http://www.cnblogs.com/jscode/p/3580878.html
实现代码如下:
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>html5 canvas</title> </head> <body> <canvas></canvas> <script> (function(bodyStyle) { bodyStyle.mozUserSelect = 'none'; bodyStyle.webkitUserSelect = 'none'; var img = new Image(); var canvas = document.querySelector('canvas'); canvas.style.backgroundColor='transparent'; canvas.style.position = 'absolute'; img.addEventListener('load', function(e) { var ctx; var w = img.width, h = img.height; var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop; var mousedown = false; function layer(ctx) { var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.fillStyle = pat; ctx.fillRect(0, 0, w, h); } function eventDown(e){ e.preventDefault(); mousedown=true; } function eventUp(e){ e.preventDefault(); mousedown=false; } function eventMove(e){ e.preventDefault(); if(mousedown) { if(e.changedTouches){ e=e.changedTouches[e.changedTouches.length-1]; } var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0; with(ctx) { beginPath() arc(x, y, 20, 0, Math.PI * 2); fill(); } } } canvas.width=w; canvas.height=h; canvas.style.backgroundImage='url('+img.src+')'; ctx=canvas.getContext('2d'); ctx.fillStyle='transparent'; ctx.fillRect(0, 0, w, h); layer(ctx); ctx.globalCompositeOperation = 'destination-out'; canvas.addEventListener('touchstart', eventDown); canvas.addEventListener('touchend', eventUp); canvas.addEventListener('touchmove', eventMove); canvas.addEventListener('mousedown', eventDown); canvas.addEventListener('mouseup', eventUp); canvas.addEventListener('mousemove', eventMove); }); img.src = 'pet.jpg'; })(document.body.style); </script> <img id="lamp" src="pet2.jpg"> </body> </html>
Trackback from your site.