Javascript 如何使用touchmove使mousemove事件适用于触摸屏？

我正在使用一个画布javascript，通过mousemove事件可以擦除背景

现在，我正试图在触摸屏（手机）上获得同样的体验。 如何将mousemove和touchmove事件同时提供给代码

（函数（）{
//创建新的画布元素并将其作为子元素追加
//，并返回对的引用
//新创建的canvas元素
函数createCanvas（父级、宽度、高度）{
var canvas={}；
canvas.node=document.createElement（'canvas'）；
canvas.context=canvas.node.getContext（'2d'）；
canvas.node.width=宽度| | 100；
canvas.node.height=高度| | 100；
parent.appendChild（canvas.node）；
返回画布；
}
函数init（容器、宽度、高度、填充颜色）{
var canvas=createCanvas（容器、宽度、高度）；
var ctx=canvas.context；
//定义自定义fillCircle方法
ctx.fillCircle=函数（x，y，半径，fillColor）{
/*this.fillStyle=fillColor；
this.beginPath（）；
这个。移动到（x，y）；
弧（x，y，半径，0，Math.PI*2，false）；
这个*/
var radgrad=ctx.createRadialGradient（x，y，0，x，y，半径）；
radgrad.addColorStop（0，'rgba（255,0,0,1'）；
radgrad.addColorStop（0.8，'rgba（255,0,0,9'）；
radgrad.addColorStop（1，'rgba（255,0,0'）；
//画图
ctx.fillStyle=radgrad；
ctx.fillRect（x-半径，y-半径，x+半径，y+半径）；
};
ctx.clearTo=函数（fillColor）{
ctx.fillStyle=fillColor；
ctx.fillRect（0，1，宽度，高度）；
};
ctx.clearTo（fillColor | |“#ddd”）；
//绑定鼠标事件
canvas.node.onmousemove=函数（e）{
如果（！canvas.isDrawing）{
返回；
}
var x=e.pageX-this.offsetLeft；
变量y=e.pageY-this.offsetTop；
var radius=100；//或其他
变量fillColor='#ff0000'；
ctx.globalCompositeOperation='destination out'；
ctx.fillCircle（x，y，半径，fillColor）；
};
canvas.node.onmouseinter=函数（e）{
canvas.isDrawing=true；
};
}
var container=document.getElementById（'canvas'）；
初始（容器，5000，3000，#f8fa58'）；
})();
正文{
左边距：-10vw；
利润上限：-30vh；
背景：url(https://i-d-images.vice.com/images/articles/meta/2014/10/21/untitled-article-1413860640.jpg?crop=1xw:0.44513137557959814xh；0xw，0.14219474497681608xh&resize=2000:*&输出格式=图像/jpeg&输出质量=75）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
#帆布{
z指数：-1；
顶部：2vh；
左：-10vw；
宽度：110vw；
高度：130vh；
溢出：隐藏；
}
您可以使用相同的事件处理程序，但在内部，您必须以不同的方式处理事件，因为
touch[XXX]
事件上没有
clientX
或
clientY
属性

触摸事件可以是多点触摸，因此它们包含一系列具有这些坐标属性的触摸

IMO一种更为简洁的方法是将事件处理程序分为两个不同的阶段：
一个用来提取事件的坐标，另一个用来处理这些坐标


（函数（）{
//有点冗长，但是。。。
功能handleMousemove（事件）{
var x=event.clientX；
var y=event.clientY；
绘制（x，y）；
}
函数handleTouchmove（事件）{
event.preventDefault（）；//我们不想滚动
var touch=event.touch[0]；
var x=touch.clientX；
变量y=touch.clientY；
绘制（x，y）；
}
//这一个可以由触摸和移动事件共享
函数激活的拖动（事件）{
event.preventDefault（）；
canvas.isDrawing=true；
}
函数绘制（eventX、eventY）{
var x=eventX-canvas.node.offsetLeft；
var y=eventY-canvas.node.offsetTop；
如果（！canvas.isDrawing）{
返回；
}
var radius=100；//或其他
变量fillColor='#ff0000'；
ctx.globalCompositeOperation='destination out'；
ctx.fillCircle（x，y，半径，fillColor）；
}
函数createCanvas（父级、宽度、高度）{
var canvas={}；
canvas.node=document.createElement（'canvas'）；
canvas.context=canvas.node.getContext（'2d'）；
canvas.node.width=宽度| | 100；
canvas.node.height=高度| | 100；
parent.appendChild（canvas.node）；
返回画布；
}
var canvas，ctx；//将其取出以避免我的处理程序嵌套得太深；
函数init（容器、宽度、高度、填充颜色）{
canvas=createCanvas（容器、宽度、高度）；
ctx=canvas.context；
//定义自定义fillCircle方法
ctx.fillCircle=函数（x，y，半径，fillColor）{
var radgrad=ctx.createRadialGradient（x，y，0，x，y，半径）；
radgrad.addColorStop（0，'rgba（255,0,0,1'）；
radgrad.addColorStop（0.8，'rgba（255,0,0,9'）；
radgrad.addColorStop（1，'rgba（255,0,0'）；
//画图
ctx.fillStyle=radgrad；
ctx.fillRect（x-半径，y-半径，x+半径，y+半径）；
};
ctx.clearTo=函数（fillColor）{
ctx.fillStyle=fillColor；
ctx.fillRect（0，1，宽度，高度）；
};
ctx.clearTo（fillColor | |“#ddd”）；
//绑定鼠标事件
canvas.node.onmousemove=节流阀（handleMousemove）；
canvas.node.ontouchmove=节流阀（handleTouchmove）；
canvas.node.onMouseCenter=
canvas.node.ontouchstart=节流阀（激活牵引）；
}
var container=document.getElementById（'canvas'）；
初始（容器，5000，3000，#f8fa58'）；
/*奖励：限制这些事件，使它们不会太频繁地开火*/
功能节流阀（回调）{
var active=false；//一个简单的标志
var evt；//跟踪最后一个事件
var handler=function（）{//仅在屏幕刷新时激发
active=false；//释放