使用 Javascript 的画布，在桌面上工作，但不能在手机上工作

Question

我使用 javascript 制作了画布，它在桌面上运行良好，但在移动设备上无法运行。 在移动设备上，当我尝试绘制时，它只会滚动。请帮助我提供在移动设备上绘制的代码。 P.S：我已经从一些网站上获取了移动代码，但它仍然无法正常工作。 请告诉并解释如何在手机上绘制它的代码？谢谢！

编辑：当您运行代码段时，它会滞后于 StackOVERFLOW。请看这里：https://codepen.io/dikshatakyar/full/YzVgJWK 编辑 2：问题已解决。谢谢。

const canvas=document.querySelector('#draw');

const ctx=canvas.getContext('2d');
// all the drawing for the canvas in ctx
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;

ctx.strokeStyle= '#51c9bb';
ctx.lineJoin='round';
ctx.lineCap='round';
ctx.lineWidth=30;

//flag
let isDrawing=false; //don't draw when mouse is just moving mouse w/o doing anything

//where to start a line from and then where to end it
let lastX=0;
let lastY=0;
let hue=0;
let direction=true;

function draw(e){
    if(!isDrawing)
    return; //only run in click and drag
console.log(e);
ctx.strokeStyle= `hsl(${hue},100%,50%)`;
ctx.beginPath();
ctx.moveTo(lastX,lastY); //start from
ctx.lineTo(e.offsetX,e.offsetY); //go to
ctx.stroke(); //to actually draw the path on canvas
[lastX,lastY]=[e.offsetX,e.offsetY];
// lastX=e.offsetX;
// lastY=e.offsetY;

hue++;
if(hue>=360){
    hue=0;
}
if(ctx.lineWidth>=80 || ctx.lineWidth<=1){
    direction=!direction;
}
if(direction)
ctx.lineWidth++;
else
ctx.lineWidth--;
}

canvas.addEventListener('mousemove',draw);
canvas.addEventListener('mousedown',(e)=>{
    isDrawing=true;
    [lastX,lastY]=[e.offsetX,e.offsetY];
});


canvas.addEventListener('mouseup',()=>isDrawing=false);
canvas.addEventListener('mouseout',()=>isDrawing=false);


//canvas on mobile
document.body.addEventListener("touchstart", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchend", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchmove", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);

*{
            margin: 0;
           
        }
     

<canvas id="draw" width="800" height="800"></canvas>
 

Answer 1

我不做太多触摸的事情，但 MDN 使用处理触摸

   clientX = e.touches[0].clientX;
   clientY = e.touches[0].clientY;

来源：https://developer.mozilla.org/en-US/docs/Web/API/Touch/clientX

这样的东西可以使用它

const canvas=document.querySelector('#draw');

const ctx=canvas.getContext('2d');
// all the drawing for the canvas in ctx
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;

ctx.strokeStyle= '#51c9bb';
ctx.lineJoin='round';
ctx.lineCap='round';
ctx.lineWidth=30;

//flag
let isDrawing=false; //don't draw when mouse is just moving mouse w/o doing anything

//where to start a line from and then where to end it
let lastX=0;
let lastY=0;
let hue=0;
let direction=true;

function draw(clientX, clientY){
    if(!isDrawing)
    return; //only run in click and drag

ctx.strokeStyle= `hsl(${hue},100%,50%)`;
ctx.beginPath();
ctx.moveTo(lastX,lastY); //start from
ctx.lineTo(clientX,clientY); //go to
ctx.stroke(); //to actually draw the path on canvas
[lastX,lastY]=[clientX,clientY];
// lastX=e.offsetX;
// lastY=e.offsetY;

hue++;
if(hue>=360){
    hue=0;
}
if(ctx.lineWidth>=80 || ctx.lineWidth<=1){
    direction=!direction;
}
if(direction)
ctx.lineWidth++;
else
ctx.lineWidth--;
}

//canvas on mobile
document.body.addEventListener("touchstart", function (e) {
  if (e.target == canvas) {
   e.preventDefault();
   clientX = e.touches[0].clientX;
   clientY = e.touches[0].clientY; 
   isDrawing=true;
   draw(clientX, clientY)
  }
}, false);
document.body.addEventListener("touchend", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
    isDrawing=false;
  }
}, false);
document.body.addEventListener("touchmove", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
    draw(clientX, clientY)
  }
}, false);

Answer 2

将overflow: hidden; 用于*

代码如下：

* {
   margin: 0;
   padding: 0;
   overflow: hidden;
}