如何在移动设备的画布上绘图？

Question

我的代码中有一些画布。所有这些都像一块黑板，这些画布让我可以在图像上绘图，但是当我尝试在设备中绘图时，什么也没有发生。这是我所有的代码：

let configureCanvas = canvas => {
  let ctx = canvas.getContext("2d");
  let painting = canvas.parentNode;
  let paintStyle = getComputedStyle(painting);


  if(canvas == document.getElementById("pizarra-musculos")) {
      var x = window.matchMedia("(max-width: 700px)")
      myFunction(x) // Call listener function at run time
      x.addListener(myFunction) // Attach listener function on state changes 
      function myFunction(x) {
      if (x.matches) { // If media query matches
          canvas.width = "350";
          canvas.height = "350";
        } else {
          canvas.width = "500";
          canvas.height = "500";
        }
      }
  }else{
    canvas.width = "350";
    canvas.height = "350";
  }


  let mouse = {
    x: 0,
    y: 0
  };

  canvas.ontouchstart = function(e){
    var touches = e.touches || [];
    var touch = touches[0] || {};
  }

  canvas.addEventListener('mousemove', function(e) {
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop
  }, false);

  if(canvas == document.getElementById("pizarra-musculos")) {
     //Rojo Claro
    ctx.lineWidth = 12;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'rgba(255, 8, 53, 0.02)';

    document.getElementById("btnRojoClaro").addEventListener("click", ()=>{
      //Rojo Claro
      ctx.lineWidth = 12;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'rgba(255, 8, 53, 0.02)';
    });
    document.getElementById("btnVerde").addEventListener("click", ()=>{
      //Rojo Claro
      ctx.lineWidth = 4;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.strokeStyle = '#249120';
    });
    document.getElementById("btnRojo").addEventListener("click", ()=>{
      //Rojo Claro
      ctx.lineWidth = 4;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.strokeStyle = '#ff0000';
    });
    document.getElementById("btnNegro").addEventListener("click", ()=>{
      //Negro
      ctx.lineWidth = 4;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.strokeStyle = '#000000';
    });
    document.getElementById("btnAzul").addEventListener("click", ()=>{
      //Azul
      ctx.lineWidth = 4;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.strokeStyle = '#1e5085';
    });


  }else{
    ctx.lineWidth = 3;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
   ctx.strokeStyle = '#e34f54';
  };

  canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
    canvas.addEventListener('mousemove', onPaint, false);
  }, false);

  canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false)
  }, false);

  var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
  };

  canvas.nextElementSibling.addEventListener('click', function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  });


}

PD：我了解了 mozila 开发人员的触摸屏，但我无法在设备上使用此画布...感谢您了解我的问题。

Answer 1

在javascript中，你可以添加监听器！这意味着将监听某些内容并在激活监听器时执行代码！

例如，如果你在js中在html中声明<button id="mybutton"></button>，你可以用document.getElementById("mybutton")检索这个按钮，这样你就可以操作元素本身，值，返回，动作等等……

让我们存储这个元素var button = document.getElementById("mybutton") 现在console.log(button) 会显示这个元素，很酷吧？

在这个按钮上你可以添加监听器，例如 onClick 会在按钮被点击时执行一个函数 button.addEvenListenner("onClick", my_function)

所以现在当您单击按钮时，您将执行 my_function（当然，您需要创建 my_function）

但在您的情况下，您希望获得鼠标移动或有人在手机上使用手指时的 eventListenner！

您已经成功了，例如使用“mousemove”！或'mouseup'等... 桌面是电话，反之亦然！ 你的手机上没有鼠标你有你的手指，所以当有人触摸屏幕时需要有一个监听器！

这就是'touchstart'事件监听器的作用，当你触摸屏幕时，你可以调用一个函数来做任何你想做的事情！

这四个监听器对你的项目来说已经足够了，你为什么会问？ 'touchstart' 告诉你什么时候触摸屏幕 'touchend' 告诉您何时将手指从屏幕上移开 'touchmove' 告诉您何时在屏幕上拖动手指（touchstart 和 touchmove 不是一回事！） 'touchcancel' 告诉你什么时候取消（老实说我不知道​​，我猜你不需要它）

现在您需要将侦听器添加到画布中

var canvas = document.getElementById("pizarra-musculos")

然后你添加你的监听器

  canvas.addEventListener("touchstart", handleStart);
  canvas.addEventListener("touchend", handleEnd);
  canvas.addEventListener("touchmove", handleMove);

现在，当使用这 3 个侦听器之一时，将调用它们旁边的函数！ 因此，您可以在这些函数中执行任何您想要的操作

 function handleMove(e) {
      // Cache the client X/Y coordinates
      var clientX = e.touches[0].clientX;
      var clientY = e.touches[0].clientY;
    }

通过这段代码，您可以跟踪屏幕手指的 x 和 y，尝试每个侦听器以了解它们何时被调用等。放置一些 console.log 来打印值，您将做起来不难，希望对你有帮助