写字板截图 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>写字板</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
      body,
      html {
        padding: 0;
        margin: 0;
      }
      a,
      div,
      span {
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
      }
      .canvas-box {
        display: block;
        margin: 40px auto;
      }
      .color-box {
        width: 1080px;
        display: block;
        margin: 20px auto;
        text-align: center;
      }
      .color-item {
        display: inline-block;
        vertical-align: middle;
        width: 48px;
        height: 24px;
        margin: 10px;
        background: #989898;
        cursor: pointer;
      }
      .red {
        background: #e01d5b;
      }
      .blue {
        background: #1d6ae0;
      }
      .green {
        background: #1de087;
      }
      .yellow {
        background: #f3e41d;
      }
      .orange {
        background: #f9850b;
      }
      .black {
        background: #333;
      }
      .color-item.active {
        border: solid 3px #565656;
      }
      .btn {
        display: block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        margin: 10px auto;
        text-align: center;
        font-size: 18px;
        border: solid 1px #999;
        border-radius: 5px;
        cursor: pointer;
      }
      .opeate{
          display: flex;
          justify-content: center;
      }
      .opeate .btn{
          margin: 0 10px;
      }
    </style>
  </head>
  <body>
    <canvas class="canvas-box" id="canvas"></canvas>
    <div class="color-box">
      <span class="color-item red"></span>
      <span class="color-item blue"></span>
      <span class="color-item green"></span>
      <span class="color-item yellow"></span>
      <span class="color-item orange"></span>
      <span class="color-item black active"></span>
    </div>
    <div class="opeate">
      <div class="btn" onclick="clearDraw()">清除</div>
      <div class="btn" onclick="toImg()">导出图片</div>
    </div>
    <script type="text/javascript">
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      var isDraw = false; //定义变量控制画笔是否可用
      var movePos; //定义变量存放初始画笔开始位置
      var linWidth = 2;
      var linColor = "#333";
      window.onload = function () {
        draw();
      };
      function toImg() {
        dataURL = canvas.toDataURL(); //转换图片为dataURL
        exportCanvasAsPNG(dataURL)
      }
      function exportCanvasAsPNG(fileName) {
        var MIME_TYPE = "image/png";
        var imgURL = fileName;
        var dlLink = document.createElement("a");
        dlLink.download = fileName;
        dlLink.href = imgURL;
        dlLink.dataset.downloadurl = [
          MIME_TYPE,
          dlLink.download,
          dlLink.href,
        ].join(":");

        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);
      }
      function draw() {
        canvas.width = 500;
        canvas.height = 500;
        context.strokeStyle = "#000";
        context.lineWidth = 2;
        context.beginPath();
        context.strokeRect(0, 0, 500, 500);
        //设置画笔颜色，宽度
        context.strokeStyle = "#000";
        context.lineWidth = 1;
        //使线段连续，圆滑
        context.lineCap = "round";
        context.lineJoin = "round";
        // drawDashedLine(context, 0, 0, 500, 500);
        // drawDashedLine(context, 0, 500, 500, 0);
        // drawLine(context, 0, 250, 500, 250);
        // drawLine(context, 250, 0, 250, 500);
      }
      //画虚线（参照网上大神）
      function drawDashedLine(context, x1, y1, x2, y2, dashLength) {
        dashLength = dashLength === undefined ? 5 : dashLength;
        var deltaX = x2 - x1;
        var deltaY = y2 - y1;
        var numDashes = Math.floor(
          Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength
        );
        for (var i = 0; i < numDashes; ++i) {
          context[i % 2 === 0 ? "moveTo" : "lineTo"](
            x1 + (deltaX / numDashes) * i,
            y1 + (deltaY / numDashes) * i
          );
        }
        context.stroke();
      }
      //画直线
      function drawLine(context, x1, y1, x2, y2) {
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.stroke();
      }
      //获取鼠标相对与canvas位置
      function getPos(x, y) {
        var box = canvas.getBoundingClientRect();
        return { x: x - box.left, y: y - box.top };
      }
      //画笔
      function drawing(e) {
        if (isDraw) {
          var position = getPos(e.clientX, e.clientY);
          context.strokeStyle = linColor;
          context.lineWidth = linWidth;
          context.save();
          context.beginPath();
          context.moveTo(movePos.x, movePos.y);
          context.lineTo(position.x, position.y);
          context.stroke();
          movePos = position;
          context.restore();
        }
      }
      //鼠标点下
      canvas.onmousedown = function (e) {
        isDraw = true;
        movePos = getPos(e.clientX, e.clientY);
        drawing(e);
      };
      //鼠标移动
      canvas.onmousemove = function (e) {
        drawing(e);
      };
      //鼠标松开
      canvas.onmouseup = function (e) {
        isDraw = false;
      };
      //鼠标离开
      canvas.onmouseout = function (e) {
        isDraw = false;
      };
      //选择画笔颜色
      $(".color-item").on("click", function () {
        $(this).addClass("active").siblings().removeClass("active");
        linColor = $(this).css("background-color");
      });
      //清除
      function clearDraw() {
        context.clearRect(0, 0, 500, 500);
        draw();
      }
    </script>
  </body>
</html>
posted @ 2021-06-29 15:45  smartwange  阅读(45)  评论(0)    收藏  举报