H5 canvas制作刮刮卡效果并计算清理结果

简要步骤如下

1.绘制底图载体任意DOM CANVAS 图片皆可
2.canvas绘制交互区域纯色或图片皆可
3.设定混合模式 "destination-out" 关键
4.根据交互情况绘制清理区域

计算绘制结果

1.原理：检测canvas绘制结果像素点的透明度情况
2.要点：像素过多的情况不必每个像素都对应检测耗时过大可自行设计采样方式

演示链接：

源码如下：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小互动-刮刮卡</title>
    <meta name="viewport"
        content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1,viewport-fit=cover">
</head>
<style>
    .bottom {
        position: absolute;
        width: 300px;
        height: 200px;
        background-color: yellow;
        color: red;
        font-size: 50px;
        text-align: center;
    }

    #canvas {
        position: absolute;
    }

    #result {
        position: absolute;
        top: 200px;
    }
</style>


<body style="margin:0;padding:0;" ontouchmove="javascript:window.event.preventDefault();">
    <div class="bottom">
        谢谢惠顾
    </div>
    <canvas id="canvas" width="300" height="200"></canvas>
    <p id="result">0%</p>
</body>
<script type="text/javascript">
    let cv = document.getElementById('canvas');
    let width = cv.width;
    let height = cv.height;
    let ctx = cv.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "gray";
    ctx.fillRect(0, 0, width, height);
    //混合模式
    ctx.globalCompositeOperation = "destination-out";

    function drawClearArea(x, y) {
        ctx.moveTo(x, y);
        ctx.arc(x, y, 20, 0, Math.PI * 2, false);
        ctx.fill();
    }


    document.addEventListener('mousedown', onDocumentMouseDown, false);

    function onDocumentMouseDown(event) {
        event.preventDefault();
        document.addEventListener('mousemove', onDocumentMouseMove, false);
        document.addEventListener('mouseup', onDocumentMouseUp, false);
    }

    function onDocumentMouseMove(event) {
        var x = event.clientX;
        var y = event.clientY;
        drawClearArea(x, y);
    }

    function onDocumentMouseUp() {
        document.getElementById('result').innerHTML = Math.floor(checkAlpha() * 100) + "%";
        document.removeEventListener('mousemove', onDocumentMouseMove);
        document.removeEventListener('mouseup', onDocumentMouseUp);
    }


    document.addEventListener('touchmove', onDocumentTouchMove, false);
    document.addEventListener('touchend', onDocumentTouchEnd, false);

    function onDocumentTouchMove(event) {
        let x = event.changedTouches[0].clientX;
        let y = event.changedTouches[0].clientY;
        drawClearArea(x, y);
    }

    function onDocumentTouchEnd(event) {
        document.getElementById('result').innerHTML = Math.floor(checkAlpha() * 100) + "%";
    }


    function checkAlpha() {
        var mydata = ctx.getImageData(0, 0, cv.width, cv.height);
        var data = mydata.data;
        var count = 0;
        let sk = width / 10;  //采样间隔
        let sc = Math.floor(data.length / sk); //采样总数
        for (var i = 0; i < sc; i++) {
            var a = data[i * sk + 3];
            if (a == 0) {
                count++;
            }
        }
        let progress = count / sc;
        return progress
    }
</script>

</html>

H5 canvas制作刮刮卡效果并计算清理结果

简要步骤如下

计算绘制结果

演示链接：

源码如下：

推荐阅读更多精彩内容