canvas绘制自由线 完整代码 兼容移动端

发布时间:2023-04-20 09:33:10    发布者:文昌文城莱奥网络技术工作室    浏览次数:404

完整的 canvas 绘制自由线的代码,兼容移动端操作如下:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas 绘制自由线</title>
    <style>
      #canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var canDraw = false; // 是否能画图标志位
      var lastPoint = null; // 上一次的鼠标位置
      var isMobile =
        navigator.userAgent.toLowerCase().indexOf('mobile') !== -1;

      // 兼容 PC 和移动端的事件
      canvas.addEventListener(
        isMobile ? 'touchstart' : 'mousedown',
        function (event) {
          event.preventDefault();
          canDraw = true;
          lastPoint = isMobile
            ? {
                x: event.targetTouches[0].pageX,
                y: event.targetTouches[0].pageY,
              }
            : { x: event.offsetX, y: event.offsetY };
        },
        { passive: false }
      );
      canvas.addEventListener(
        isMobile ? 'touchmove' : 'mousemove',
        function (event) {
          event.preventDefault();
          if (!canDraw) return;

          var currentPoint = isMobile
            ? {
                x: event.targetTouches[0].pageX,
                y: event.targetTouches[0].pageY,
              }
            : { x: event.offsetX, y: event.offsetY };

          // 绘制线条
          context.beginPath();
          context.lineWidth = 2;
          context.lineJoin = 'round';
          context.lineCap = 'round';
          context.moveTo(lastPoint.x, lastPoint.y);
          context.lineTo(currentPoint.x, currentPoint.y);
          context.stroke();

          lastPoint = currentPoint;
        },
        { passive: false }
      );
      canvas.addEventListener(
        isMobile ? 'touchend' : 'mouseup',
        function (event) {
          event.preventDefault();
          canDraw = false;
          lastPoint = null;
        },
        { passive: false }
      );
    </script>
  </body>
</html>