canvas 简单画图板

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
  }

• 最后鼠标抬起的时候关掉lock

   function up (){
    lock = false
}