我的画布绘图应用程序无法在移动设备上运行

Question

我最近一直在学习 HTML 画布，并制作了一个在桌面上完美运行的简单绘图应用程序。但在移动设备上，我无法画出一条连续的线，只有一个点。知道我做错了什么吗？链接到我的 codepen 构建

https://codepen.io/ryan-rigley/pen/oNXEvwm?fbclid=IwAR0rekoc1wcT2d4of0vCW32F0bzQDX1kW8DsJKiDq8t0ymLky1IkHyu8ozc

let color = "black";
let strokeSize = 10;

function changeColorAndSize(data, width) {
  color = data;
  strokeSize = width;
}
window.addEventListener("load", () => {
  const canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");

  //resizing
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;

  //variables
  let painting = false;

  //functions
  function startPosition(e) {
    painting = true;
    draw(e);
  }

  function endPosition() {
    painting = false;
    ctx.beginPath();
  }

  function draw(e) {
    if (!painting) {
      return;
    }
    e.preventDefault();
    ctx.lineWidth = strokeSize;
    ctx.lineCap = "round";
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(e.clientX, e.clientY);
  }

  //event listeners
  canvas.addEventListener("mousedown", startPosition);
  canvas.addEventListener("touchstart", startPosition);
  canvas.addEventListener("mouseup", endPosition);
  canvas.addEventListener("touchend", endPosition);
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", draw);
});

Answer 1

mousemove 和 touchmove 事件具有不同的 clientX 和 clientY。对于 mousemove 事件 (e)：

X = e.clientX 和 Y = e.clientY

对于 touchmove 事件：

X = e.touches[0].clientX 和 Y = e.touches[0].clientY

因此，您需要使用条件语句来查找事件的类型，并相应地使用 find X 和 Y。更新后的代码可以在下面和codepen上找到

let color = "black";
let strokeSize = 10;

function changeColorAndSize(data, width) {
  color = data;
  strokeSize = width;
}
window.addEventListener("load", () => {
  const canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");

  //resizing
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;

  //variables
  let painting = false;

  //functions
  function startPosition(e) {
    painting = true;
    draw(e);
  }

  function endPosition() {
    painting = false;
    ctx.beginPath();
  }

  function draw(e) {
    if (!painting) {
      return;
    }
    
    e.preventDefault();
    ctx.lineWidth = strokeSize;
    ctx.lineCap = "round";
 
    // ctx.lineTo(e.clientX, e.clientY);
    if (e.type == 'touchmove'){
      ctx.lineTo(e.touches[0].clientX, e.touches[0].clientY);
    } else if (e.type == 'mousemove'){
      ctx.lineTo(e.clientX, e.clientY);
    }
      
    ctx.stroke();
    ctx.strokeStyle = color;
    ctx.beginPath();
    
    // ctx.moveTo(e.clientX, e.clientY);
    if (e.type == 'touchmove'){
      ctx.moveTo(e.touches[0].clientX, e.touches[0].clientY);
    } else if (e.type == 'mousemove'){
      ctx.moveTo(e.clientX, e.clientY);
    }
  }

  //event listeners
  canvas.addEventListener("mousedown", startPosition);
  canvas.addEventListener("touchstart", startPosition);
  canvas.addEventListener("mouseup", endPosition);
  canvas.addEventListener("touchend", endPosition);
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", draw);
});

body{
  margin:0;
  padding:0;
}
#colorButtonBox{
  position:absolute;
  background:rgb(210,210,210);
  padding:5px;
  margin:5px;
  border-radius:10px;
  bottom:0;
}
#colorButton {
  transition: .1s linear;
  position: relative;
  float:left;
  margin:5px;
  border-radius:5px;
  width: 40px;
  height: 40px;
  z-index: 3;
}
#eraserButton {
  transition: .1s linear;
  position: relative;
  float:left;
  margin:5px;
  border-radius:50%;
  width: 40px;
  height: 40px;
  z-index: 3;
  background:white;
}
#eraserButton:hover {
  width:30px;
  height:30px;
  margin:10px;
}
#colorButton:hover {
  transition: .1s linear;
  width:45px;
  height:45px;
  margin:2.5px;
}

.black {
  background:black;
}
.blue {
  background:blue;
}
.red {
  background:red;
}
.green {
  background:green;
}
.yellow {
  background:yellow;
}

<META name="viewport" content="initial-scale=0.66, user-scalable=no">
<body>
  <div id="colorButtonBox">
    <div id="colorButton" class="black" onclick='changeColorAndSize("black",10)'></div>
    <div id="colorButton" class="red" onclick="changeColorAndSize('red',10)"></div>
    <div id="colorButton" class="green" onclick="changeColorAndSize('green',10)"></div>
    <div id="colorButton" class="blue" onclick="changeColorAndSize('blue',10)"></div>
    <div id="colorButton" class="yellow" onclick="changeColorAndSize('yellow',10)"></div>
    <div id="eraserButton" onclick="changeColorAndSize('white',100)"></div>
  </div>
  
  <canvas id="canvas"></canvas>

</body>

Answer 2

我不确定您的应用无法在移动应用上运行是什么意思，因此我将假设您的意思是它无法绘图。

我的回答基于here 回答的问题。它接受 touchmove 事件，并以相同的方式基于触摸 clientX 和 clientY 手动创建带有 clientX 的 mousemove 事件。

这是新的code pen

以下是修改后的代码：

let color = "black";
let strokeSize = 10;

function changeColorAndSize(data, width) {
  color = data;
  strokeSize = width;
}
window.addEventListener("load", () => {
  const canvas = document.querySelector("#canvas");
  const ctx = canvas.getContext("2d");

  //resizing
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;

  //variables
  let painting = false;

  //functions
  function startPosition(e) {
    painting = true;
    draw(e);
  }

  function endPosition() {
    painting = false;
    ctx.beginPath();
  }

  function draw(e) {
    if (!painting) {
      return;
    }
    e.preventDefault();
    e.stopPropagation();
    ctx.lineWidth = strokeSize;
    ctx.lineCap = "round";
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(e.clientX, e.clientY);
  }

  //event listeners
  canvas.addEventListener("mousedown", startPosition);
  canvas.addEventListener("touchstart", startPosition);
  canvas.addEventListener("mouseup", endPosition);
  canvas.addEventListener("touchend", endPosition);
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", function (e) {
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousemove", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  draw(mouseEvent);
}, false);
});

body{
  margin:0;
  padding:0;
}
#colorButtonBox{
  position:absolute;
  background:rgb(210,210,210);
  padding:5px;
  margin:5px;
  border-radius:10px;
  bottom:0;
}
#colorButton {
  transition: .1s linear;
  position: relative;
  float:left;
  margin:5px;
  border-radius:5px;
  width: 40px;
  height: 40px;
  z-index: 3;
}
#eraserButton {
  transition: .1s linear;
  position: relative;
  float:left;
  margin:5px;
  border-radius:50%;
  width: 40px;
  height: 40px;
  z-index: 3;
  background:white;
}
#eraserButton:hover {
  width:30px;
  height:30px;
  margin:10px;
}
#colorButton:hover {
  transition: .1s linear;
  width:45px;
  height:45px;
  margin:2.5px;
}

.black {
  background:black;
}
.blue {
  background:blue;
}
.red {
  background:red;
}
.green {
  background:green;
}
.yellow {
  background:yellow;
}

<META name="viewport" content="initial-scale=0.66, user-scalable=no">
<body>
  <div id="colorButtonBox">
    <div id="colorButton" class="black" onclick='changeColorAndSize("black",10)'></div>
    <div id="colorButton" class="red" onclick="changeColorAndSize('red',10)"></div>
    <div id="colorButton" class="green" onclick="changeColorAndSize('green',10)"></div>
    <div id="colorButton" class="blue" onclick="changeColorAndSize('blue',10)"></div>
    <div id="colorButton" class="yellow" onclick="changeColorAndSize('yellow',10)"></div>
    <div id="eraserButton" onclick="changeColorAndSize('white',100)"></div>
  </div>
  
  <canvas id="canvas"></canvas>

</body>

希望对您有所帮助，如果您还有其他问题，请随时提问：)