用原生js实现刮奖效果

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

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

HTML代码

    
    
    




    这个浏览器不支持canvas
    

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);
    });

}

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