答案：使用HTML5 Canvas和JavaScript实现画板，通过鼠标事件绘制线条。创建canvas元素，监听mousedown、mousemove和mouseup事件，利用ctx.beginPath()、moveTo()、lineTo()和stroke()绘图，添加颜色与线宽控制输入框及清空按钮，实现基本绘图功能。
用 JavaScript 和 HTML5 的 Canvas 实现一个简单的画板，是学习前端图形绘制的常见入门项目。它不仅能帮助理解 Canvas 的基本绘图 API，还能掌握鼠标事件的处理逻辑。下面是一个完整、可运行的简单画板实现。
1. 创建画布和基础结构
首先，在 HTML 中创建一个 <canvas> 元素，并设置其宽高。通过 CSS 简单美化，让它在页面中居中显示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>简易画板</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
canvas {
border: 1px solid #ccc;
background: white;
cursor: crosshair;
}
</style>
</head>
<body>
<canvas id="drawing-board" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('drawing-board');
const ctx = canvas.getContext('2d');
// 后续绘图逻辑
</script>
</body>
</html>
2. 实现基本绘图功能
通过监听鼠标事件（mousedown、mousemove、mouseup）来实现绘画。核心思路是：按下鼠标开始路径，移动时绘制线条，松开结束路径。
关键方法包括：
立即学习“Java免费学习笔记（深入）”；
- ctx.beginPath()：开始一条新路径
- ctx.moveTo(x, y)：将画笔移动到指定坐标
- ctx.lineTo(x, y)：从当前点画线到新坐标
- ctx.stroke()：描边路径
let isDrawing = false;
<p>// 获取鼠标在画布上的相对坐标
function getPos(e) {
const rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}</p><p>canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
const pos = getPos(e);
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
});</p><p>canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
const pos = getPos(e);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
});</p><p>canvas.addEventListener('mouseup', () => {
isDrawing = false;
});</p><p>canvas.addEventListener('mouseout', () => {
isDrawing = false;
});</p>3. 添加绘图样式控制
可以增加线条颜色、粗细等选项，提升交互体验。
例如添加两个输入控件：
<input type="color" id="color-picker" value="#000000" /> <input type="range" id="line-width" min="1" max="20" value="5" />
然后在脚本中读取这些值并应用到绘图上下文：
const colorPicker = document.getElementById('color-picker');
const lineWidthInput = document.getElementById('line-width');
<p>function updateStyle() {
ctx.strokeStyle = colorPicker.value;
ctx.lineWidth = lineWidthInput.value;
}</p><p>// 每次属性变化或绘图前更新样式
colorPicker.addEventListener('input', updateStyle);
lineWidthInput.addEventListener('input', updateStyle);</p><p>// 初始化样式
updateStyle();</p>4. 清空画布功能
添加一个清空按钮，调用 clearRect 方法清除整个画布。
<button id="clear-btn">清空画布</button>
<p>document.getElementById('clear-btn').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});</p>基本上就这些。这样一个具备基本绘画能力、支持颜色粗细调节和清空功能的简单画板就完成了。你可以在此基础上扩展更多功能，比如撤销操作、保存为图片（canvas.toDataURL()）、橡皮擦模式等。核心在于理解 Canvas 的状态管理和路径绘制机制。
