基于js實現刮刮卡特效代碼



39 152 51



特效描述:基于js實現 刮刮卡特效,基于js實現刮刮卡特效代碼

代碼結構

1. HTML代碼

<title></title>
<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 = 'gray';
                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, 5, 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 = 'prize.jpg';
    })(document.body.style);
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 其他 抽獎 轉盤抽獎
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表