答案：使用HTML5 Canvas和JavaScript实现画板，通过鼠标事件绘制线条。创建canvas元素，监听mousedown、mousemove和mouseup事件，利用ctx.beginPath()、moveTo()、lineTo()和stroke()绘图，添加颜色与线宽控制输入框及清空按钮，实现基本绘图功能。
用 JavaScript 和 HTML5 的 Canvas 实现一个简单的画板，是学习前端图形绘制的常见入门项目。它不仅能帮助理解 Canvas 的基本绘图 API，还能掌握鼠标事件的处理逻辑。下面是一个完整、可运行的简单画板实现。
1. 创建画布和基础结构
首先，在 HTML 中创建一个 canvas> 元素，并设置其宽高。通过 CSS 简单美化，让它在页面中居中显示。
简易画板
2. 实现基本绘图功能
通过监听鼠标事件（mousedown、mousemove、mouseup）来实现绘画。核心思路是：按下鼠标开始路径，移动时绘制线条，松开结束路径。
关键方法包括：
立即学习“Java免费学习笔记（深入）”；
- ctx.beginPath()：开始一条新路径
- ctx.moveTo(x, y)：将画笔移动到指定坐标
- ctx.lineTo(x, y)：从当前点画线到新坐标
- ctx.stroke()：描边路径
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
let isDrawing = false;// 获取鼠标在画布上的相对坐标 function getPos(e) { const rect = canvas.getBoundingClientRect(); return { x: e.clientX - rect.left, y: e.clientY - rect.top }; }
canvas.addEventListener('mousedown', (e) => { isDrawing = true; const pos = getPos(e); ctx.beginPath(); ctx.moveTo(pos.x, pos.y); });
canvas.addEventListener('mousemove', (e) => { if (!isDrawing) return; const pos = getPos(e); ctx.lineTo(pos.x, pos.y); ctx.stroke(); });
canvas.addEventListener('mouseup', () => { isDrawing = false; });
canvas.addEventListener('mouseout', () => { isDrawing = false; });
3. 添加绘图样式控制
可以增加线条颜色、粗细等选项，提升交互体验。
例如添加两个输入控件：
然后在脚本中读取这些值并应用到绘图上下文：
const colorPicker = document.getElementById('color-picker');
const lineWidthInput = document.getElementById('line-width');
function updateStyle() {
ctx.strokeStyle = colorPicker.value;
ctx.lineWidth = lineWidthInput.value;
}
// 每次属性变化或绘图前更新样式
colorPicker.addEventListener('input', updateStyle);
lineWidthInput.addEventListener('input', updateStyle);
// 初始化样式
updateStyle();
4. 清空画布功能
添加一个清空按钮，调用 clearRect 方法清除整个画布。
document.getElementById('clear-btn').addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); });
基本上就这些。这样一个具备基本绘画能力、支持颜色粗细调节和清空功能的简单画板就完成了。你可以在此基础上扩展更多功能，比如撤销操作、保存为图片（canvas.toDataURL()）、橡皮擦模式等。核心在于理解 Canvas 的状态管理和路径绘制机制。
