canvas刮奖

canvas刮奖：

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 300px;">
        <div>您不可能中奖</div>
        <canvas style="position: absolute;left:0;top:0;" id="cv" height="300" width="400" ></canvas>
    </div>
</body>
<script type="text/javascript">
    var cv = document.getElementById("cv");
    var ctx = cv.getContext("2d");
    ctx.fillStyle = "red";
    ctx.lineWidth = 20;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.fillRect(0,0,400,300);

    ctx.globalCompositeOperation = "destination-out"; // 重合属性重要

    cv.onmousedown = function(e) {
        ctx.moveTo(e.offsetX, e.offsetY);
        document.onmousemove = function(ev) {
            ctx.lineTo(ev.offsetX, ev.offsetY);
            ctx.stroke();
        }
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
            calcOutRate();
        }
    }

    function calcOutRate() {
        // 一个像素点对应四个值，rgba 我们使用a进行判断。
        var data = ctx.getImageData(0,0,400,300).data;
        var len = data.length;
        var cnt = 0;
        console.log(data.length);
        for(var i=3;i<len;i+=4) {
            if(data[i] == 0) {
                cnt++;
            }
        }
        if(cnt / (len/4) > 0.3) { //被擦除的像素点大于30%清空画布
            ctx.clearRect(0,0,400,300);
        }
    }
</script>
</html>

 

posted @ 2017-12-15 11:38  fanlinqiang  阅读(217)  评论(0)    收藏  举报