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
}
