标签：des style blog http color os io ar 2014
通过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>
标签：des style blog http color os io ar 2014
原文地址：http://www.cnblogs.com/whlives/p/3945567.html
