canvas电子签名和画板（源码）

最新推荐文章于 2023-12-06 10:17:50 发布

湖边看客

最新推荐文章于 2023-12-06 10:17:50 发布

阅读量422

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/VVVVV16/article/details/126839349

版权

<!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>
    canvas {
      border: 1px solid #333;
    }
  </style>
</head>

<body>
  <label for="">颜色:</label>
  <input type="color" id="colors">
  <label for="">粗细:</label>
  <select id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <button>清除</button>
  <hr>
  <canvas id="p" width="600" height="400"></canvas>
</body>
<script>
  const canvas = document.querySelector('#p');
  context = canvas.getContext('2d');
  //3.声明一个控制鼠标down和up的状态
  let status = false;
  // 4.接下来  我们改变一下笔的颜色
  let color = '#000';
  document.querySelector('#colors').addEventListener('change', e => {
    // console.log(e.target.value);
    color = e.target.value
  });
  //5.接下来 我们改变一下画笔的粗细、
  let lineWidth = 1
  document.querySelector('#select').onchange = function (e) {
    lineWidth = e.target.value
  }
  //6.我们来清除一下画板
  document.querySelector('button').onclick = function () {
    canvas.width = 600
    canvas.height = 400
  }
  //接下来 进行具体的操作
  //1.先设置起始点
  canvas.addEventListener('mousedown', (e) => {
    context.beginPath();
    context.moveTo(e.offsetX, e.offsetY);
    status = true
  })
  //2.设置鼠标移动时  折线的拐点
  canvas.addEventListener('mousemove', (e) => {
    if (status) {
      context.lineTo(e.offsetX, e.offsetY);
      context.strokeStyle = color;
      context.lineWidth = lineWidth;
      context.stroke();
    }
  })
  //4.当鼠标up时  我们重新把状态给改变一下
  canvas.addEventListener('mouseup', (e) => {
    status = false;
  })

</script>

</html>