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

作者: EasonYi | 来源:发表于2020-12-26 12:46 被阅读0次

H5 canvas制作刮刮卡效果并计算清理结果
canvas实现刮刮卡 -- 移动端
OpenGL ES 实现刮刮卡和手写板功能
canvas制图做刮刮卡效果
canvas基础之刮刮卡效果
H5刮刮卡效果
H5刮刮卡效果
Canvas 刮刮卡
实现刮刮卡刮奖效果js
刮刮卡效果——能否刮出一个未来

简要步骤如下

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>