使用Canvas实现刮刮卡功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.ggk {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    margin: 0 auto;
    color: red;
    position: relative;

}

.ggk span {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    user-select: none;
}

canvas {
    position: absolute;
    left: 0;
    top: 0;
}

</style>
<div class="ggk">
    <span></span>
    <canvas id="canvas">
        你的浏览器版本太低, 请升级浏览器.最好使用Chrome, IE太垃圾了
    </canvas>
</div>

<script>
var canvas = document.querySelector("#canvas");
draw();

function draw(){
    if (!canvas.getContext) return;
    canvas.width = 200;
    canvas.height = 100;
    var ctx = canvas.getContext("2d");
    productResult();
    drawCover(ctx);
    scratch(ctx);
}

function scratch(ctx){
    /*绘制线段来实现*/
    canvas.onmousedown = function (e){
        var downX = e.offsetX;
        var downY = e.offsetY;
        ctx.beginPath();
        ctx.globalCompositeOperation = "destination-out";
        ctx.lineWidth = 10;
        ctx.lineCap = "round";
        ctx.moveTo(downX, downY);
        canvas.onmousemove = function (e){
            var x = e.offsetX;
            var y = e.offsetY;
            ctx.lineTo(x, y);
            ctx.stroke();
        }
    }
    /*在路径中绘制圆弧来实现*/
    /*canvas.onmousedown = function (e){
        canvas.onmousemove = function (e){
            var x = e.offsetX;
            var y = e.offsetY;
            ctx.beginPath();
            ctx.arc(x, y, 8, 0, Math.PI * 2);
            ctx.globalCompositeOperation = "destination-out";
            ctx.fill();
            ctx.closePath();
        }
    }*/
    canvas.onmouseup = function (){
        canvas.onmousemove = null;
    }
}

/*生成中奖信息*/
function productResult(){
    var span = document.querySelector(".ggk span");
    var arr = ["100元", "200元", "300元", "400元", "谢谢", "谢谢", "谢谢", "谢谢"];
    var text = arr[randomInt(0, arr.length - 1)];
    span.innerHTML = text;
}

/*绘制覆盖层*/
function drawCover(ctx){
    ctx.save();
    ctx.fillStyle = "rgb(100,100,100)";
    ctx.fillRect(0, 0, 200, 100);
    ctx.restore();
}

/**
 返回随机的 [from, to] 之间的整数(包括from，也包括to)
 */
function randomInt(from, to){
    return parseInt(Math.random() * (to - from + 1) + from);
}

</script>
</body>
</html>
使用Canvas实现刮刮卡功能

猜你喜欢
