需求:使用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; // 改变画笔的颜色
}
字太丑了!