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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。