canvas之刮刮卡效果

最新推荐文章于 2024-01-24 14:45:51 发布

天空还下着雪

最新推荐文章于 2024-01-24 14:45:51 发布

阅读量852

点赞数

分类专栏：前端文章标签： canvas html js

本文链接：https://blog.csdn.net/u010081689/article/details/44062125

版权

前端专栏收录该内容

154 篇文章 0 订阅

订阅专栏

单页面实现刮刮卡效果。。

HTML页面：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>刮刮卡效果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        .content,.cover{width:400px; height:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px;}
        .content{ font-size:48px; line-height:400px; text-align:center;}
        h3{ text-align:center; line-height:200px;}
    </style>


</head>


<body>
<h3>添喜你中奖了！！！</h3>
<div class="content" >中奖啦~！</div>
<canvas id="cover" class="cover" width="400" height="400"></canvas>
</body>


<script>
    var isdown = false,
            cover = document.getElementById("cover"),

            covercanvas = cover.getContext("2d");
    //
    covercanvas.fillStyle="transparent";
    covercanvas.fillRect(0,0,400,400);

    function fillter( canvas ){
        canvas.fillStyle="#ccc";
        canvas.fillRect(0,0,400,400);
    }
    function isDown(e){
        e.preventDefault();
        isdown=true;
    }
    function isUp(e){
        isdown=false;
    }
    function draw( e ){
        e.preventDefault();
        if(isdown){
            if(e.changedTouches){
                e=e.changedTouches[e.changedTouches.length-1];
            }


            var _height= parseInt((window.innerHeight-400)/2),
                    _width= parseInt((window.innerWidth-400)/2),
                    touchTop=e.clientY - _height,
                    touchLeft=e.clientX - _width;

            with(covercanvas){
                beginPath();
                arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
                fill();
            }
        }
//alert(touchTop);
    }
    fillter(covercanvas);
    covercanvas.globalCompositeOperation = 'destination-out';
    cover.addEventListener('touchstart',isDown);
    cover.addEventListener('touchmove',draw);
    cover.addEventListener('touchend',isUp);
    cover.addEventListener('mousemove',draw);
    cover.addEventListener('mousedown',isDown);
    cover.addEventListener('mouseup',isUp);

</script>
</html>

欢迎关注技术开发分享录：http://fenxianglu.cn/