start

我们用canvas要做这样一个东西

图片

一个简单的触笔写字板，是不是很好，haha

prepare

我们会用到一些js的基础知识，还有canvas 基础的化线，不懂可以直接查看官方api，一查就会，如 addEventListener，mousemove,mouseup,mousedown 等，是不是很快想到该怎么做了！

beginning

大概思路
- 首先是设置一些基础的变量，锁lock，旧坐标（oldX，oldY ），canvas画线相关设置，一会会说到

Coding

html 代码

  <canvas id="canvas" width="600" height="300"></canvas>

就一行代码

script 代码（获取元素）变量声明

  var canvas = document.getElementById('canvas')
  let ctx = canvas.getContext('2d')
  ctx.fillStyle = 'black'
  ctx.fillRect(0,0,600,300)
  //设置线的颜色
  var linerColor = 'white'
  //宽
  var linw = 4
  var lock = false
  var oldx = 0
  var oldy = 0

给canvas 画布注册事件

  canvas.addEventListener('mousemove',move,false)
  canvas.addEventListener('mousedown',down,false)
  canvas.addEventListener('mouseup',up,true)

具体的事件代码

当用户鼠标按下的时候，我们需要记录用户按下的x，y 坐标值，并保存，同时开锁
```
  function down(e){
    lock = true
    oldx = e.pageX - 10
    oldy = e.pageY - 10
}
```
接下来是move的代码，这个稍微多一点，耐心看，你能看懂
- 当用户移动鼠标的时候，判断当前锁的状态
- 记录用户移动是的 x，y 值
- 设置 canvas 画线，线画old值，然后lineTo上去，两点去电一条线
- 最后设置canvas的样式，别忘记 stroke
- 最关键一步，将当前的新的x，y 重新复制给oldx和oldy

  function move(e){
    if ( !lock ) return
    let newX = e.pageX - 10
    let newY = e.pageY - 10
    ctx.beginPath()
    ctx.moveTo(oldx,oldy)
    ctx.lineTo(newX,newY)
    ctx.strokeStyle = linerColor
    ctx.lineGap = 'round'
    ctx.lineWidth = linw
    ctx.stroke()
    oldx = newX
    oldy = newY
  }