检测手指触摸 javascript canvas

Question

我有这个：

<canvas id="canvas" width="400" height="400" style="border:2px solid; background-color: #2c2c2c;"></canvas>
              <input type="button" value="Clear" class="canvas-clear" />
              <button onclick="toDataUrlForCanvas()">Submit</button>
          <script>
            $(document).ready(function() {
            var flag, dot_flag = false,
              prevX, prevY, currX, currY = 0,
              color = 'black', thickness = 2;
            var $canvas = $('#canvas');
            var ctx = $canvas[0].getContext('2d');
          
            $canvas.on('mousemove mousedown mouseup mouseout', function(e) {
              prevX = currX;
              prevY = currY;
              currX = e.clientX - $canvas.offset().left;
              currY = e.clientY - $canvas.offset().top;
              if (e.type == 'mousedown') {
                flag = true;
              }
              if (e.type == 'mouseup' || e.type == 'mouseout') {
                flag = false;
              }
              if (e.type == 'mousemove') {
                if (flag) {
                  ctx.beginPath();
                  ctx.moveTo(prevX, prevY);
                  ctx.lineTo(currX, currY);
                  ctx.strokeStyle = color;
                  ctx.lineWidth = thickness;
                  ctx.stroke();
                  ctx.closePath();
                }
              }
            });
          
            $('.canvas-clear').on('click', function(e) {
              c_width = $canvas.width();
              c_height = $canvas.height();
              ctx.clearRect(0, 0, c_width, c_height);
              $('#canvasimg').hide();
            });
          });
          
          function toDataUrlForCanvas() {
            var imgData = document.getElementById('canvas')
            imgData = imgData.toDataURL(); 
            console.log(imgData)
          }
          </script>

现在它检测到鼠标被按下，但是当我在移动设备上使用它时，它不起作用，因为它没有检测到我的手指放在 canvas 上。我试图在网上找到一些解决方案，但没有找到适合这种情况的解决方案。我该如何解决这个问题？

Answer 1

您必须使用触摸事件 APIs 来触发鼠标事件。有关更多信息，请使用此 link，它解释了所有可用的选项以及基于 canvas API.

的示例

这里是我在 abjt.dev 上的投资组合网站的代码片段。您也可以在 Github 上查看代码。

let x = 0;
let y = 0;
document.querySelector('html').addEventListener('mousemove', (e) => {
    // do something
});

document.addEventListener('touchstart', (e) => {
    let touch = e.touches[0];
    x = touch.clientX;
    y = touch.clientY;
    // do something
})
document.addEventListener('touchmove', (e) => {
    let touch = e.touches[0];
    const mouseEvent = new MouseEvent("mousemove", {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    document.querySelector('html').dispatchEvent(mouseEvent);
    // do something
})

检测手指触摸 javascript canvas

detect finger touch javascript canvas

javascript

html

jquery

canvas