canvas实现移动端刮刮卡

最新推荐文章于 2021-10-11 17:27:13 发布

妙趣前端

最新推荐文章于 2021-10-11 17:27:13 发布

阅读量914

点赞数 3

分类专栏： web javaScript系列

本文链接：https://blog.csdn.net/qq_45768871/article/details/105741087

版权

web 同时被 2 个专栏收录

84 篇文章 4 订阅

订阅专栏

javaScript系列

59 篇文章 1 订阅

订阅专栏

文章目录

实现刮刮卡
了解canvas的透明设置
ImageData对象
得到场景像素数据
全局透明度的设置

覆盖合成
实现刮刮卡
后记

实现刮刮卡

了解canvas的透明设置

ImageData对象

ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
width:图片宽度，单位是像素
height:图片高度，单位是像素
data:Uint8ClampedArray类型的一维数组，
包含着RGBA格式的整型数据，范围在0至255之间（包括255）
R:0 --> 255(黑色到白色)
G:0 --> 255(黑色到白色)
B:0 --> 255(黑色到白色)
A:0 --> 255(透明到不透明)

得到场景像素数据

getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据

ctx.getImageData(sx, sy, sw, sh)
sx:将要被提取的图像数据矩形区域的左上角 x 坐标。
sy:将要被提取的图像数据矩形区域的左上角 y 坐标。
sw:将要被提取的图像数据矩形区域的宽度。
sh:将要被提取的图像数据矩形区域的高度。

全局透明度的设置

globalAlpha = value
这个属性影响到 canvas 里所有图形的透明度，
有效的值范围是 0.0 （完全透明）到 1.0（完全不透明）
默认是 1.0

覆盖合成

source:新的图像(源)
destination:已经绘制过的图形(目标)
globalCompositeOperation
source-over(默认值):源在上面,新的图像层级比较高
source-in :只留下源与目标的重叠部分(源的那一部分)
source-out :只留下源超过目标的部分
source-atop:砍掉源溢出的部分
.
destination-over:目标在上面,旧的图像层级比较高
destination-in:只留下源与目标的重叠部分(目标的那一部分)
destination-out:只留下目标超过源的部分
destination-atop:砍掉目标溢出的部分

实现刮刮卡

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></meta>
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        #wrap,
        ul,
        ul>li {
            height: 100%;
        }
        
        ul>li {
            background: url(img/b.png);
            background-size: 100% 100%;
        }
        
        canvas {
            position: absolute;
            left: 0;
            top: 0;
            transition: 1s;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <canvas></canvas>
        <ul>
            <li></li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    window.onload = function() {
        var canvas = document.querySelector("canvas");
        canvas.width = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            var img = new Image();
            img.src = "img/a.png";
            img.onload = function() {
                draw();
            }


            function draw() {
                var flag = 0;
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                canvas.addEventListener("touchstart", function(ev) {
                    ev = ev || event;
                    var touchC = ev.changedTouches[0];

                    var x = touchC.clientX - canvas.offsetLeft;
                    var y = touchC.clientY - canvas.offsetTop;


                    ctx.globalCompositeOperation = "destination-out";
                    ctx.lineWidth = 40;
                    ctx.lineCap = "round";
                    ctx.lineJoin = "round";
                    ctx.save();
                    ctx.beginPath();
                    //						ctx.arc(x,y,20,0,360*Math.PI/180);
                    ctx.moveTo(x, y);
                    ctx.lineTo(x + 1, y + 1)
                    ctx.stroke();
                    ctx.restore();
                })

                canvas.addEventListener("touchmove", function(ev) {
                    ev = ev || event;
                    var touchC = ev.changedTouches[0];

                    var x = touchC.clientX - canvas.offsetLeft;
                    var y = touchC.clientY - canvas.offsetTop;

                    ctx.save();
                    //						ctx.arc(x,y,20,0,360*Math.PI/180);
                    ctx.lineTo(x, y)
                    ctx.stroke();
                    ctx.restore();
                })

                canvas.addEventListener("touchend", function() {
                    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
                    var allPx = imgData.width * imgData.height;
                    for (var i = 0; i < allPx; i++) {
                        if (imgData.data[4 * i + 3] === 0) {
                            flag++;
                        }
                    }

                    if (flag >= allPx / 2) {
                        canvas.style.opacity = 0;
                    }
                })

                canvas.addEventListener("transitionend", function() {
                    this.remove();
                })
            }
        }
    }
</script>

</html>