维多利亚的秘密微信推广广告模仿-刮刮卡

最新推荐文章于 2021-08-27 14:50:54 发布

jasondu264

最新推荐文章于 2021-08-27 14:50:54 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： lightApp html5 canvas

本文链接：https://blog.csdn.net/jasondu264/article/details/38064147

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

看到这个效果，一开始是想一定是用canvas啦，可以建一个蒙版，然后使用擦除就搞定了，但试了一下不行，如果擦除的速度快就会出现一个个不连续的块；

正确的方式是使用绘制线，但将线绘制在蒙版上也不是我们的目的，我们需要的是和蒙版做差值运算，这样才能有擦除的效果；还有一个问题，我们是通过多条线连接来实现的，默认线的连接是不平滑的，这时我们需要设置一个属性：context2D.lineJoin = "round"，下面是具体的编码：

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<canvas id="canvas">
    <p>Your browserdoes not support the canvas element!</p>
</canvas>
<image id="image" src="http://img0.bdstatic.com/img/image/shouye/mnqz-9561341778.jpg"></image>
</body>
</html>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }
    canvas {
        position: absolute;
        -webkit-transition: all 0.8s;
    }
    .canvas_hide {
        opacity: 0;
    }
</style>
<script type="text/javascript">
    var canvas =document.getElementById("canvas");
    var context2D =canvas.getContext("2d");
    var array_paint = [];
    var height = document.documentElement.clientHeight,
        width = document.documentElement.clientWidth;
    // 绘制蒙版
    function draw(height, width) {
        context2D.clearRect(0,0, canvas.width, canvas.height);
        context2D.globalAlpha = 0.8
        context2D.fillStyle ="#FF0000";
        context2D.fillRect(0, 0, width, height);
        context2D.fill();
    }
    // 绘制线
    function paint () {
        // 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。也就是取余
        context2D.globalCompositeOperation = 'destination-out';
        context2D.globalAlpha = 1;
        context2D.strokeStyle ="#ffffff";
        context2D.lineWidth = 20;
        context2D.lineJoin = "round";   // 当两条线条交汇时，创建圆形边角

        for(var i=0; i < array_paint.length; i++)//循环数组
        {
            context2D.beginPath();
            if(array_paint[i] && i){//当是拖动而且i!=0时，从上一个点开始画线。
                context2D.moveTo(array_paint[i-1][0], array_paint[i-1][1]);
            }else{
                context2D.moveTo(array_paint[i][0], array_paint[i][1]);
            }
            context2D.lineTo(array_paint[i][0], array_paint[i][1]);
            context2D.closePath();
            context2D.stroke();
        }
    }
    // 计算擦除的百分比
    function getTransparentPercent(ctx, width, height) {
        // 通过判断每个像素点来计算百分比
        var imgData = ctx.getImageData(0, 0, width, height),
                pixles = imgData.data,
                transPixs = [];
        for (var i = 0, j = pixles.length; i < j; i += 4) {
            var a = pixles[i + 3];
            if (a < 128) {
                transPixs.push(i);
            }
        }
        return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
    };
    $(document).ready(function () {
        $('#image').css({
            height: height+'px',
            width: width+'px'
        })
        $('canvas').attr({
            height: height+'px',
            width: width+'px'
        })
        draw(height, width);
        $('canvas')
                .on('touchmove', function (event) {
                    event.preventDefault();
                    var x = event.originalEvent.targetTouches[0].clientX,
                            y = event.originalEvent.targetTouches[0].clientY;
                    array_paint.push([x, y]);
                    paint();
                })
                .on('touchend', function () {
                    array_paint = [];
                    var percent = getTransparentPercent(context2D, width, height);
                    console.log(percent);
                    if(percent > 20){
                        $('canvas').addClass('canvas_hide');
                    }
                });
    })
</script>