首页 > 代码库 > html5实现刮刮卡效果
html5实现刮刮卡效果
通过Canvas实现的可刮涂层效果.
修改img.src时涂层也会自动适应新图片的尺寸.
修改layer函数可更改涂层样式.
涂层:
可刮效果:
<!DOCTYPE html><html><body><img src="images/2.jpg" id="lamp" width="100%" /><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) { //ctx.fillStyle = ‘red‘; //ctx.fillRect(0, 0, w, h);//颜色图层 var img=document.getElementById("lamp") var pat=ctx.createPattern(img,‘repeat‘); ctx.rect(0,0,w,h); ctx.fillStyle=pat; ctx.fill(); } 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, 10, 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 = ‘images/1.jpg‘;//被遮住的背景图 })(document.body.style);</script></body></html>
html5实现刮刮卡效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。