前端画布实现“刮刮乐“

最新推荐文章于 2024-05-04 23:19:14 发布

沧.海

最新推荐文章于 2024-05-04 23:19:14 发布

阅读量679

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42145499/article/details/120091060

版权

html5 javascript html

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>刮刮乐</title>
    <style type="text/css">
        #c1 {
            border: 1px solid blue;
            position: absolute;、//生成绝对定位的元素，
        }

        #c2 {
            border: 1px solid red;
        }

        body {
            position: relative;
        }
    </style>
</head>

<body> <canvas id="c1" width="800px" height="800px">

    </canvas>
    <canvas id="c2" width="850px" height="850px">

    </canvas>
</body>
<script type="text/javascript">
    var c1 = document.getElementById("c1");
    var c2 = document.getElementById("c2");
    var ctx1 = c1.getContext("2d");
    var ctx2 = c2.getContext("2d");
    // 绘制图片到底层 canvas2
    var imgs = new Image();
    imgs.src = 'img/girl.jpg';
    imgs.onload = function () {
        ctx2.drawImage(this, 0, 0)
    }
    // 涂层绘制到顶层(即覆盖膜) canvas1
    ctx1.fillStyle = "lightgray";
    ctx1.fillRect(0, 0, 850, 850);
    ctx1.font = "normal 80px 仿宋";
    ctx1.strokeStyle = "slateblue";
    ctx1.strokeText("请刮开！", 320, 750);
    // 监听canvas的onmousedown事件  
    c1.onmousedown = function (ev) {
        c1.onmousemove = function (e) {
            console.log(e);
            var w = 50;
            // 清除区域的宽度   
            var h = 50;
            // 清除区域的高度  
            var x = e.pageX - c1.offsetLeft - w / 2;
            // 清除区域的x位置    
            var y = e.pageY - c1.offsetTop - h / 2;
            // 清除区域的y位置    
            ctx1.clearRect(x, y, w, h);
        }
    }
    c1.onmouseup = function (ev) {   // 取消onmousemove事件 
        c1.onmousemove = null;
    }</script>

</html>

以上代码实现的是一个类似与刮刮乐的小游戏吧，应用的前端知识也很简单，两个画布，一个在底层，一个在上层，鼠标监听事件控制上层的画布，运用算法实现底层画布的展现。在当前路径下的img文件夹下的一个girl.jpg文件是底层文件，可以随意的替换。

实现效果图如下

沧.海

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端画布实现“刮刮乐“

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>刮刮乐</title> <style type="text/css"> #c1 { border: 1px solid blue; position: absolute;、//生成绝对定位的元素， }.
复制链接

扫一扫

专栏目录