canvas实现刮刮卡

最新推荐文章于 2023-10-07 20:57:09 发布

吃葡萄不吐葡萄皮嘻嘻

最新推荐文章于 2023-10-07 20:57:09 发布

阅读量275

点赞数

分类专栏： canvas 文章标签：前端 canvas

本文链接：https://blog.csdn.net/qq_45695853/article/details/131390701

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图如下：

在这里插入图片描述

实现思路
1、定位实现布局，把文字放在画布下面
2、使用键盘的按下，弹起，离开，移动事件来实现刮开效果

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas实现刮刮卡</title>
    <style>
        .ggk{
            width: 400px;
            height: 200px;
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
            letter-spacing: 4px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
   
</head>

<body>
    <div class="ggk">中五百万</div>
    <script>

        // 创建元素
        let canvas = document.createElement('canvas');
        // 设置画布宽高
        canvas.width = 400;
        canvas.height = 200;
        //添加到页面
        document.body.appendChild(canvas)
        //获取画笔
        let ctx = canvas.getContext('2d');
        let image = new Image();
        image.src = "./imgs/ggk.jpeg"
        image.onload = function(){
            ctx.drawImage(image,0,0,canvas.width,canvas.height)
        }
        //鼠标按下
        let flag = false;
        canvas.onmousedown = function(){
            flag = true;
        }
        //鼠标弹起
        canvas.onmouseup = function(){
            flag = false;
        }
        //鼠标离开
        canvas.onmouseleave = function(){
            flag = false;
        }
        //鼠标移入事件
        canvas.onmousemove = function(e){
            if(!flag) return;
            //鼠标在画布上的坐标
            let x = e.pageX-canvas.offsetLeft;
            let y = e.pageY-canvas.offsetTop;
            // console.log(e);
            ctx.beginPath()
            ctx.globalCompositeOperation = 'destination-out';

            // 画圆
            // ctx.arc(x,y,10,0,2*Math.PI)
            // 画椭圆(椭圆两个圆心)
            ctx.ellipse(x,y,15,10,0,0,2*Math.PI)
            ctx.fill()
            ctx.closePath()
        }

        let m = Math.random()
        console.log(m);
        if(m<0.1){
            document.querySelector('.ggk').innerHTML = "恭喜中一千万";
        }else if(m<0.5){
            document.querySelector('.ggk').innerHTML = "恭喜中五百万";
        }else{
            document.querySelector('.ggk').innerHTML = "恭喜中一百万"
        }
    </script>
</body>

</html>