技术栈：JavaScript + ES6
三个事件
touchstart：触摸开始
touchmove：触摸移动
touchend：触摸结束
<div id="app"></div>
<script>
let app = document.querySelector('#app')
app.addEventListener('touchstart',function () {
console.log('触发touchstart，开始摸了')
})
app.addEventListener('touchmove',function () {
console.log('触发touchmove，开始动了')
})
app.addEventListener('touchend',function () {
console.log('触发touchend，没摸了')
})
</script>
效果.gif
摸的是哪里？
app.addEventListener('touchstart',function (e) {
console.log(e)
console.log('触发touchstart，开始摸了')
})
console.log(e)之后的结果.png
上图解释：
TouchEvent
↓
touches //触摸
↓
clientX // 手指触摸相对于窗口X轴坐标
clientY // 手指触摸相对于窗口Y轴坐标
pageX // 相对于页面X轴的坐标
pageY // 相对于页面X轴的坐标
screenX // 相对于屏幕的X轴坐标
screenY // 相对于屏幕的Y轴坐标
这里我们只要用到clientX和clientY。
app.addEventListener('touchstart',function (e) {
console.log('触发touchstart，开始摸了')
console.log(e.touches[0].pageX)
console.log(e.touches[0].pageY)
})
...此处省略一点点代码
获取pageX与pageY.gif
通过获取pageX与pageY，就知道用户点了哪里。
知道摸哪里了，生成一个div，放进body里面。
let app = document.querySelector('#app')
app.addEventListener('touchstart',function (e) {
console.log('触发touchstart，开始摸了')
// console.log(e.touches[0].clientX)
// console.log(e.touches[0].clientY)
let {pageX,pageY} = e.touches[0]
//析构赋值
//等价于下面声明的clientX，clientY
// let clientX = e.touches[0].clientX
// let clientY = e.touches[0].clientX
//生成div，放进body中
let div = document.createElement('div')
div.style.position = 'absolute'
div.style.top = pageY + 'px'
div.style.left = pageX + 'px'
div.style.width = '4px'
div.style.height = '4px'
div.style.borderRadius = '2px'
div.style.background = 'red'
document.body.appendChild(div)
})
生成div.gif
同时也在touchmove中做同样的事。
app.addEventListener('touchmove',function (e) {
console.log('触发touchmove，开始动了')
let {pageX,pageY} = e.touches[0]
//析构赋值
//等价于下面声明的clientX，clientY
// let clientX = e.touches[0].clientX
// let clientY = e.touches[0].clientX
let div = document.createElement('div')
div.style.position = 'absolute'
div.style.top = pageY + 'px'
div.style.left = pageX + 'px'
div.style.width = '4px'
div.style.height = '4px'
div.style.borderRadius = '2px'
div.style.background = 'red'
document.body.appendChild(div)
})
touchmove中添加div.gif
问题：快速滑动线条会出现空隙怎么办？？慢慢移动可以形成连贯的一条线。
修改<div id="app"></div> => <canvas id="app"></canvas>
未完。。。
