wangjie-fourth 的个人博客

may be just need work hard

目录
使用canvas实现画板
/    

使用canvas实现画板

mdn canvas 教程

PC端和APP端手写板

要求:新开网页后,全屏都可写入信息。
(1)css代码

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #canvas {
        border: 1px solid red;
        display: block;
      }
    </style>

(2)HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>画板</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

(3)javascript代码

      var canvas = document.getElementById("canvas");
      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;
  
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "black";
      ctx.strokeStyle = "none";
      ctx.lineWidth = 10;
     // 优化线条  
      ctx.lineCap = "round";
      let painting = false;
      var isTouchDevice = "ontouchstart" in document.documentElement;
      let last;

      if (isTouchDevice) {
        canvas.ontouchstart = e => {
          let x = e.touches[0].clientX;
          let y = e.touches[0].clientY;
          last = [x, y];
        };
        canvas.ontouchmove = e => {
          let x = e.touches[0].clientX;
          let y = e.touches[0].clientY;
          drawLine(last[0], last[1], x, y);
          last = [x, y];
        };
      } else {
        canvas.onmousedown = e => {
          painting = true;
          last = [e.clientX, e.clientY];
        };
  
        canvas.onmousemove = e => {
          if (painting === true) {
            drawLine(last[0], last[1], e.clientX, e.clientY);
            last = [e.clientX, e.clientY];
          }
        };
  
        canvas.onmouseup = () => {
          painting = false;
        };
      }
  
      function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
      }

canvas元素占满屏幕的坑

(1)当我想让canvas沾满整个屏幕时,我很自然的写下以下样式

#canvas{
    width="100vw";
    height="100vh"  
}

但画出来的图形,却很模糊。这就是因为**canvas标签不能二次填写宽高,否则会拉伸,像素会模糊**。
(2)于是我想,直接在canvas标签上,写这个样式呗

<canvas id="canvas" width="100vw" height="100vh"></canvas>

但效果跟没写一样。这是因为**vwvhCSS的单位,而不是HTML的单位。**
所以在JS中,这俩个代码是有区别的:

// 通过改变html标签的样式来改变样式
canvas.width = document.documentElement.clientWidth;
// 通过css的样式来改变样式
canvas.style.width = 100px;

(3)body标签默认高度为内容高度
我想那我就直接获取body的宽高,然后通过js写入进去。代码如下:

      var canvas = document.getElementById("canvas");
      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;

但是显示的边框并不是占满全屏的,这是因为**body标签默认高度为内容高度,而canvas标签是inline元素**。将其改成:

      #canvas {
        border: 1px solid red;
        display: block;
      }

手机多指触控

在实现手指画的时候,要注意手指在手机上是可能多指触控的。所以触点是在e.touches数组中的,从这里取出xy即可。

评论