用原生js实现刮奖效果

用原生js实现简单的刮奖效果
效果图
用原生js实现刮奖效果

分析：这是运用canvas来做的，页面结构为一个canvas和一张图片。canvas在最上层，图片在最下层。canvas与图片宽高一致。首先在canvas上填充灰色并写上文字，将“画笔”的globalCompositeOperation属性设置为destination-out，（globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上,destination-out属性值在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。）
最后设置鼠标事件，当鼠标按下时开始“画画”，当鼠标移动时，“画笔”跟随鼠标移动，当鼠标弹起时，“画笔”停止“作画”。也要考虑到鼠标离开canvas时，也要停止“作画”。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刮奖</title>
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<div class="big">
    <canvas id="mycan" class="mycan" width="685" height="759">这个浏览器不支持canvas</canvas>
    <img src="images/1.jpg">
</div>

<script src="js/index.js"></script>
</body>
</html>

css代码

.big{
    position: relative;
}
.mycan{
    position: absolute;
    z-index: 1;
}
img{
    position: absolute;
    width: 685px;
    height: 759px;
}

js代码

{
    let cvs = document.getElementById('mycan');
    let ctx = cvs.getContext('2d');

    ctx.fillStyle = "#ccc";//背景颜色为#ccc
    ctx.rect(0,0,685,759);
    ctx.fill();//填充
    ctx.fillStyle="#000";//字体颜色为#000
    ctx.font ="40px Arial";//字体和字体大小
    ctx.fillText("点击刮奖",250,340,200);

    ctx.globalCompositeOperation = 'destination-out';//在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
    ctx.lineWidth = 80;  //设置”画笔“粗细
    ctx.lineJoin = "round";//设置线的接头为圆型
    ctx.lineCap = "round";//设置线的两端为圆型
    function move(){
        ctx.lineTo(event.offsetX,event.offsetY);
        ctx.stroke();
    }
    //鼠标事件
    cvs.addEventListener("mousedown",function () {
        ctx.beginPath();
        ctx.moveTo(event.offsetX,event.offsetY);
        cvs.addEventListener("mousemove",move)
    });
    cvs.addEventListener("mouseleave",function () {
        cvs,removeEventListener("mousemove",move);
    });
    cvs.addEventListener("mouseup",function () {
        cvs,removeEventListener("mousemove",move);
    });

}

这样就完成了简单的抽奖效果。抽到一只有魅力的哈士奇呢。