前端canvas技术实现多种小案例（持续更新中）

Kaven.js

已于 2022-12-05 19:25:19 修改

阅读量788

点赞数 2

文章标签：前端 javascript html

于 2022-12-04 17:23:17 首次发布

本文链接：https://blog.csdn.net/qq_55154022/article/details/128173977

版权

1.刮刮乐

<!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>刮刮乐</title>
    <style>
      #ggk {
        width: 600px;
        height: 400px;
        font-size: 30px;
        text-align: center;
        line-height: 400px;
        position: absolute;
        top: 100px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <div id="ggk">谢谢惠顾</div>
    <canvas id="canvas" width="600px" height="400px"></canvas>
  </body>
  <script>
    // 获取画笔
    var c1 = document.getElementById("canvas");
    var ctx = c1.getContext("2d");
    // 绘制图片
    let img = new Image();
    img.src = "./img/ggk.jpeg";
    img.onload = function () {
      ctx.drawImage(img, 0, 0, 600, 400);
    };
    // 判断是否可以画
    var isDraw = false;
    // 鼠标按下的时候设置为可以绘画
    c1.onmousedown = function () {
      isDraw = true;
    };
    // 鼠标抬起的时候设置为不可以绘画
    c1.onmouseup = function () {
      isDraw = false;
    };
    // 当鼠标移动并且可以绘画时，获取鼠标的坐标信息并以此为圆心绘制圆形
    c1.onmousemove = function (e) {
      if (isDraw) {
        var x = e.pageX;
        var y = e.pageY;
        // destination-out模式可以消除重叠的部分，也就是我们画的圆形和图片重叠的部分，然后显示不重叠的部分
        ctx.globalCompositeOperation = "destination-out";
        ctx.arc(x, y, 20, 0, 2 * Math.PI);
        ctx.fill();
      }
    };
    // 设置随机数，模拟概率，增加趣味性
    let random = Math.random();
    var ggk = document.querySelector("#ggk");
    if (random < 0.1) {
      ggk.innerHTML = "恭喜你获得iPhone14";
    } else {
      ggk.innerHTML = "谢谢惠顾";
    }
  </script>
</html>

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>Document</title>
    <style>
      body {
        background-color: #87ceeb;
      }
      #c1 {
        background-color: #fff;
      }
      /* 设置按钮点击时的样式 */
      .active {
        color: #fff;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <canvas id="c1" width="800px" height="400px"></canvas>
    <hr

最低0.47元/天解锁文章

Kaven.js

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端canvas技术实现多种小案例（持续更新中）

文章采用前端HTML5新特性canvas技术来实现各种各样的小案例，不仅有效果展示，而且有详细的代码和注释，同时自己还会不断地学习更新内容！刮刮乐、在线画板、动态时钟、贪吃蛇
复制链接

扫一扫