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

最新推荐文章于 2025-10-14 17:40:32 发布

原创最新推荐文章于 2025-10-14 17:40:32 发布 · 303 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #js #javascript

学习笔记同时被 2 个专栏收录

13 篇文章

订阅专栏

原生js

10 篇文章

订阅专栏

这篇博客介绍如何利用HTML5的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;  // 改变画笔的颜色
}