Canvas手机端画板

技术栈：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>

未完。。。