canvas实现移动端刮刮卡

Paloma ·

更新时间:2024-11-11

· 876 次阅读

在这里插入图片描述

文章目录实现刮刮卡了解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:砍掉目标溢出的部分

实现刮刮卡

在这里插入图片描述


    
        * {
            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;
        }
    
        
            
        
    
    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 / 2) {
                        canvas.style.opacity = 0;
                    }
                })
                canvas.addEventListener("transitionend", function() {
                    this.remove();
                })
            }
        }
    }

后记

喜欢我的小伙伴可以关注我哦，分享学习笔记，相互交流 ↓↓↓↓↓↓↓

在这里插入图片描述