Javascript 画布绘制触摸未绘制

如果我在lineTo（）和moveTo（）上输入一个位置，我就有一条线，但是如果我给touchstart和touchmove位置，什么都不会发生，我有机器人控制台错误帮助我

touchStart（e）{
this.touchdesiner（e.changedTouches[0].pageX，e.changedTouches[0].pageY）
console.log（e.changedTouches[0].pageX，e.changedTouches[0].pageY）；
}
触摸移动（e）{
e、 预防默认值（）；
this.touchdesiner（e.changedTouches[0].pageX，e.changedTouches[0].pageY）
console.log（e.changedTouches[0].pageX，e.changedTouches[0].pageY）
}
触摸屏（x，y）{
this.cont.lineWidth=2；
this.cont.strokeStyle=“#000”；
this.cont.beginPath（）；
这个。继续移动到（x，y）；
这个。cont.lineTo（x，y）；
此.cont.stroke（）；
}

以下是绘制线条的正确顺序：

在TouchStart上：
1.开始新路径（从画布上提起笔）
2.把笔移到这儿来

触控移动：
3.笔仍接触画布时，将笔移到此处

canvas=document.getElementById（“can”）； cont=canvas.getContext（“2d”）； 功能触摸启动（e）{ this.cont.beginPath（）； this.cont.moveTo（e.changedTouches[0].pageX，e.changedTouches[0].pageY）； } 功能触摸移动（e）{ e、 预防默认值（）； this.touchdesiner（e.changedTouches[0].pageX，e.changedTouches[0].pageY） } 功能触摸屏（x，y）{ this.cont.lineWidth=2； this.cont.strokeStyle=“#000”； 这个。cont.lineTo（x，y）； 此.cont.stroke（）； } window.addEventListener（“touchstart”，touchstart）； window.addEventListener（“touchmove”，touchmove）

帆布

此.cont.moveTo（x，y）；这个。cont.lineTo（x，y） — 那不是一条线，那是一个点。@SebastianSimon，但我用mousemouve做了同样的事情，它的效果很好
this.cont.lineTo（e.offsetX，e.offsetY）；此.cont.stroke（）；this.cont.beginPath（）；此.cont.moveTo（e.offsetX，e.offsetY）@rafinha187，这是不一样的。在这里的评论中，首先是stroke（），然后调用moveTo（），这在您的触摸中也应该起作用example@AhmedElyamani触摸
touchdesiner（x，y）{this.cont.lineTo（x，y）；this.cont.stroke（）；this.cont.beginPath（）；this.cont.moveTo（x，y）；this.cont.closePath（）；}
鼠标
desiner（e）{if（！this.signer）return；this.cont.lineTo（e.offsetX，e.offsetY）；this.cont.stroke（）；this.cont.beginPath（）；this.cont.moveTo（e.offsetX，e.offsetY）；}
我不明白