canvas画布，写字板

 

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .out {
        width: 800px;
        margin: 50px auto;
        position: relative;
      }
      .out p {
        font-size: 24px;
        color: red;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
      }
      .out button {
        color: green;
        font-style: 18px;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 5%;
        border: none;
        background: none;
        outline: none;
        border: 1px solid green;
        padding: 2px 4px;
        border-radius: 2px;
      }
      #cvs1 {
        background: #eee;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="out">
      <p>写写看...</p>
      <button>清除</button>
      <canvas id="cvs1" width="800" height="800"></canvas>
    </div>
    <script>
      var cvs = document.getElementById("cvs1"),
        ctx = cvs.getContext("2d"),
        l = cvs.getBoundingClientRect().left,
        t = cvs.getBoundingClientRect().top;

      ctx.beginPath();
      ctx.fillStyle = "#eee";
      ctx.fillRect(0, 0, 800, 800);
      ctx.closePath();

      cvs.onmousedown = function (ev) {
        var ev = ev || window.event,
          x = ev.clientX - l,
          y = ev.clientY - t;

        ctx.beginPath();
        ctx.moveTo(x, y);

        document.onmousemove = function (ev) {
          var ev = ev || window.event,
            dx = ev.clientX - l;
          dy = ev.clientY - t;

          ctx.lineTo(dx, dy);
          ctx.strokeStyle = "red";
          ctx.lineWidth = 4;
          ctx.stroke();
          return false;
        };
        document.onmouseup = function () {
          document.onmousedown = null;
          document.onmousemove = null;
          ctx.closePath();
        };
        return false;
      };

      document.getElementsByTagName("button")[0].onclick = function () {
        ctx.clearRect(0, 0, 800, 800);
      };
    </script>
  </body>
</html>
复制代码

 

posted @   a瑶池  阅读(196)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示
SQL AI 助手