用原生js实现刮奖效果

迈不过友情╰ 2022-02-19 01:56 230阅读 0赞

用原生js实现简单的刮奖效果  
效果图  
![在这里插入图片描述][2019041514500663.gif]

分析：这是运用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);
        });
    
    }

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

[2019041514500663.gif]: /images/20220219/70b32207d3704187a8d8ce2ce9599974.png