canvas画板实现思路

1、监听鼠标事件
①按下鼠标：onmousedown；滑动鼠标：onmousemove；松开鼠标：onmouseup；
②
按下鼠标时，更改画画的状态,获取鼠标的x、y坐标（通过clientX、clientY获取）；
滑动鼠标时，把滑动获取的值作为新点，再通过把新点坐标赋值给旧点坐标，鼠标滑动的同时就连成了线；
松开鼠标时，更改画画的状态。

2、监听触摸事件（isTouchingDevice）
①触摸屏幕：ontouchstart；滑动屏幕：ontouchmove；
②
触摸屏幕时，获取坐标；
滑动屏幕时，把滑动获取的值作为新点，再通过把新点坐标赋值给旧点坐标，触屏滑动的同时就连成了线；

3、状态转换
①触发事件前，判断当前状态，通过painting = true来切换画画状态，eraserEnabled = true来切换橡皮擦状态 ;
②操作在哪个事件中使用就在哪个事件中控制。

4、画板标签canvas
①通过canvas元素的getContext('2d')方法所返回的对象属性和方法，可用于在画布上绘制线条、矩形、圆形、文本等；
②canvas的宽高需要一开始就写好，如果强行在css样式修改宽高，会拉伸使其模糊。要在JS中通过获取设备屏幕的宽高，赋值给canvas的宽高

let canvas = document.getElementById('canvas')
let ctx = document.getContext('2d')
canvas.width = docunemnt.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight

③先声明填充颜色，再在绘制中填充
④常用API

填充颜色
ctx.fillStyle = 'black'
ctx.strokeStyle = 'black'

fill() 填充路径
stroke() 描绘路径

⑤canvas是内联元素

5、橡皮擦代码

if(eraserEnabled){
    ctx.clearRect(e.clientX-5,e.clientY-5,0,0)
}

6、清除画布代码

ctx.clearRect(0,0,canvas.width,canvas.height)