4.22学习笔记 使用canvas实现画板

需求:使用canvas 实现一个能写字的画板

<canvas width="800" height="500"></canvas>  // 创建画布
 <input type="color">// 颜色 后面可以改变笔的颜色

// 获取节点
let canvas = document.getElementsByTagName('canvas')[0];
let inp = document.getElementsByTagName('input')[0];
let ctx = canvas.getContext('2d');  // 创建画布
canvas.onmousedown = (e) => {  //鼠标按下事件
  ctx.beginPath();  // 路径开始
  ctx.moveTo(e.offsetX, e.offsetY);  // 其实起始位置,为鼠标的横纵坐标
  canvas.onmousemove = e => {  // 移动
    ctx.lineTo(e.offsetX, e.offsetY);  // 线段终点
    ctx.stroke();  // 绘制
  }
}
document.onmouseup = () => {  // 鼠标抬起事件
  canvas.onmousemove = null;  // 清除移动事件
  ctx.closePath();   // 结束路径
}
inp.onblur = (e) => {   // 失去焦点事件
  ctx.strokeStyle = inp.value;  // 改变画笔的颜色
}

字太丑了!