【微信_小游戏_canvas_基础_笔记4】

微信_小游戏_canvas_基础_笔记4

自由划线

这里吐槽一下,我看原作者(joke_shi)教程并未实现此功能
逐句翻译,查询功能,花了几天时间
才在官方文档上查询到onTouchStart,并非onMouseUp
搞了几天时间(不过也不是专门在学这个)

// 自由画
wx.onTouchStart((res) => {
  let m_x = res.changedTouches[0].clientX;
  let m_y = res.changedTouches[0].clientY;
  console.log("触摸 按下",m_x,m_y)
  ctx.beginPath();
  ctx.moveTo(m_x,m_y)
  wx.onTouchMove((res) => {
    let l_x = res.changedTouches[0].clientX;
    let l_y = res.changedTouches[0].clientY;
    console.log("触摸 移动",l_x,l_y)
    ctx.lineTo(l_x,l_y)
    ctx.stroke()
  })
})

wx.onTouchEnd((res) => {
  console.log("触摸 结束",res)
  console.log(ctx.canvas.width,ctx.canvas.height)
  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
})

在学的同学,可以看看移动onTouchEnd的位置,看看有什么变化