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

Posted 2023-03-25

【中文标题】如何在移动设备的画布上绘图？

【英文标题】：How can i draw on a canvas in mobile device?

【发布时间】：2021-09-02 17:58:09

【问题描述】：

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

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 开发人员的触摸屏，但我无法在设备上使用此画布...感谢您了解我的问题。

【问题讨论】：

在那个 sn-p 中甚至不能在 PC 上绘图

@Samathingamajig 你什么意思？我可以在电脑上画画

当我点击“Rune code sn-p”并尝试绘制时，什么也没有发生

哦，是的，因为它需要 html 部分才能工作......但我需要在触摸上获取事件并在移动设备而不是桌面上绘制画布

【参考方案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 来打印值，您将做起来不难，希望对你有帮助

【讨论】：

嘿@nerap，感谢您的回复...但我是canvas和js领域的菜鸟，您能为我解释一下吗？