Javascript 我的画布绘图应用程序赢得'；我不能在手机上工作

我最近一直在学习HTML画布，并制作了一个简单的绘图应用程序，它可以完美地在桌面上工作。但在手机上，我不能画一条连续的线，只能画一个点。知道我做错了什么吗？链接到我的代码笔构建

---

我不确定你所说的应用程序在移动应用程序上不起作用是什么意思，所以我假设你的意思是它不起作用

我的回答是基于所回答的一个问题。它接受touchmove事件，并以相同的方式基于touch

clientX

和

clientY使用
clientX
手动创建mousemove事件

这是新的

以下是更改后的代码：


let color=“black”；
让strokeSize=10；
函数更改颜色和大小（数据、宽度）{
颜色=数据；
strokeSize=宽度；
}
window.addEventListener（“加载”，（）=>{
const canvas=document.querySelector（“画布”）；
const ctx=canvas.getContext（“2d”）；
//调整大小
canvas.height=window.innerHeight；
canvas.width=window.innerWidth；
//变数
让绘画=虚假；
//功能
功能启动位置（e）{
绘画=真实；
抽签（e）；
}
函数endPosition（）{
绘画=假；
ctx.beginPath（）；
}
功能图（e）{
如果（！绘画）{
返回；
}
e、 预防默认值（）；
e、 停止传播（）；
ctx.lineWidth=冲程大小；
ctx.lineCap=“圆形”；
ctx.lineTo（e.clientX，e.clientY）；
ctx.stroke（）；
ctx.strokeStyle=颜色；
ctx.beginPath（）；
ctx.moveTo（e.clientX，e.clientY）；
}
//事件侦听器
canvas.addEventListener（“鼠标向下”，起始位置）；
canvas.addEventListener（“touchstart”，startPosition）；
canvas.addEventListener（“鼠标”，结束位置）；
canvas.addEventListener（“touchend”，endPosition）；
canvas.addEventListener（“mousemove”，draw）；
canvas.addEventListener（“触摸移动”，函数（e）{
var-touch=e.touch[0]；
var mouseEvent=新的mouseEvent（“mousemove”{
clientX:touch.clientX，
clientY:touch.clientY
});
绘制（mouseEvent）；
}，假）；
});
正文{
保证金：0；
填充：0；
}
#彩色按钮盒{
位置：绝对位置；
背景：rgb（210210）；
填充物：5px；
保证金：5px；
边界半径：10px；
底部：0；
}
#彩色按钮{
过渡：.1s线性；
位置：相对位置；
浮动：左；
保证金：5px；
边界半径：5px；
宽度：40px；
高度：40px；
z指数：3；
}
#橡皮擦按钮{
过渡：.1s线性；
位置：相对位置；
浮动：左；
保证金：5px；
边界半径：50%；
宽度：40px；
高度：40px；
z指数：3；
背景：白色；
}
#橡皮擦按钮：悬停{
宽度：30px；
高度：30px；
利润率：10px；
}
#颜色按钮：悬停{
过渡：.1s线性；
宽度：45px；
高度：45px；
利润率：2.5px；
}
布莱克先生{
背景：黑色；
}
蓝先生{
背景：蓝色；
}
瑞德先生{
背景：红色；
}
格林先生{
背景：绿色；
}
黄先生{
背景：黄色；
}
mousemove
和
touchmove
事件具有不同的
clientX
和
clientY
。对于mousemove事件（e）：

X=e.clientX和Y=e.clientY

对于touchmove活动：

X=e.touchs[0]。clientX和Y=e.touchs[0]。clientY

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


let color=“black”；
让strokeSize=10；
函数更改颜色和大小（数据、宽度）{
颜色=数据；
strokeSize=宽度；
}
window.addEventListener（“加载”，（）=>{
const canvas=document.querySelector（“画布”）；
const ctx=canvas.getContext（“2d”）；
//调整大小
canvas.height=window.innerHeight；
canvas.width=window.innerWidth；
//变数
让绘画=虚假；
//功能
功能启动位置（e）{
绘画=真实；
抽签（e）；
}
函数endPosition（）{
绘画=假；
ctx.beginPath（）；
}
功能图（e）{
如果（！绘画）{
返回；
}
e、 预防默认值（）；
ctx.lineWidth=冲程大小；
ctx.lineCap=“圆形”；
//ctx.lineTo（e.clientX，e.clientY）；
如果（e.type=='touchmove'）{
ctx.lineTo（e.touchs[0].clientX，e.touchs[0].clientY）；
}else if（e.type==“mousemove”）{
ctx.lineTo（e.clientX，e.clientY）；
}
ctx.stroke（）；
ctx.strokeStyle=颜色；
ctx.beginPath（）；
//ctx.moveTo（e.clientX，e.clientY）；
如果（e.type=='touchmove'）{
移动到（e.touchs[0].clientX，e.touchs[0].clientY）；
}else if（e.type==“mousemove”）{
ctx.moveTo（e.clientX，e.clientY）；
}
}
//事件侦听器
canvas.addEventListener（“鼠标向下”，起始位置）；
canvas.addEventListener（“touchstart”，startPosition）；
canvas.addEventListener（“鼠标”，结束位置）；
canvas.addEventListener（“touchend”，endPosition）；
canvas.addEventListener（“mousemove”，draw）；
canvas.addEventListener（“touchmove”，draw）；
});
正文{
保证金：0；
填充：0；
}
#彩色按钮盒{
位置：绝对位置；
背景：rgb（210210）；
填充物：5px；
保证金：5px；
边界半径：10px；
底部：0；
}
#彩色按钮{
过渡：.1s线性；
位置：相对位置；
浮动：左；
保证金：5px；
边界半径：5px；
宽度：40px；
高度：40px；
z指数：3；
}
#橡皮擦按钮{
过渡：.1s线性；
位置：相对位置；
浮动：左；
保证金：5px；
边界半径：50%；
宽度：40px；
高度：40px；
z指数：3；
背景：白色；
}
#橡皮擦按钮：悬停{
宽度：30px；
高度：30px；
利润率：10px；
}
#颜色按钮：悬停{
过渡：.1s线性；
宽度：45px；
高度：45px；
利润率：2.5px；
}
布莱克先生{
背景：黑色；
}
蓝先生{
背景：蓝色；
}
瑞德先生{
背景：红色；
}
格林先生{
背景：绿色；
}
黄先生{
背景：黄色；
}


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);
});