答案：使用HTML5 Canvas和JavaScript可创建在线画板，支持画笔、橡皮擦、颜色线宽调节及清空功能。1. 通过canvas绘制图形，监听鼠标事件实现绘图；2. 利用color和range输入框控制颜色与线条粗细；3. 橡皮擦通过切换为白色画笔覆盖实现；4. clearRect方法清空画布；5. 可扩展触摸支持、撤销、保存等功能。
使用HTML5的Canvas元素可以轻松创建一个在线绘图画板。通过JavaScript操作Canvas API，你可以实现基本的绘图功能，如画笔、擦除、颜色选择和清空画布等。下面是一个完整的示例代码，展示如何开发一个简单的在线画板。
1. 基本HTML结构
首先创建一个包含Canvas画布和控制按钮的HTML页面：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>HTML5在线画板</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin: 20px;
}
#canvas {
border: 1px solid #ccc;
cursor: crosshair;
}
.controls button {
margin: 5px;
padding: 8px 12px;
font-size: 14px;
}
.controls input {
vertical-align: middle;
}
</style>
</head>
<body>
<h2>在线绘图画板</h2>
<div class="controls">
<input type="color" id="colorPicker" value="#000000" />
<input type="range" id="lineWidth" min="1" max="20" value="5" />
<button id="clearBtn">清空画布</button>
<button id="eraserBtn">橡皮擦</button>
<button id="penBtn">画笔</button>
</div>
<br />
<canvas id="canvas" width="800" height="500"></canvas>
<script>
// JavaScript代码将在下方添加
</script>
</body>
</html>
2. 使用JavaScript实现绘图逻辑
在<script>标签中添加以下JavaScript代码，实现鼠标绘制功能：
// 获取元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const lineWidthInput = document.getElementById('lineWidth');
const clearBtn = document.getElementById('clearBtn');
const eraserBtn = document.getElementById('eraserBtn');
const penBtn = document.getElementById('penBtn');
// 绘图状态
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let isEraser = false;
// 设置初始线条样式
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 5;
ctx.strokeStyle = '#000000';
// 鼠标按下开始绘制
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
// 鼠标移动时绘制线条
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
});
// 鼠标松开停止绘制
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
// 鼠标离开画布也停止
canvas.addEventListener('mouseout', () => {
isDrawing = false;
});
// 更新线条宽度
lineWidthInput.addEventListener('change', () => {
ctx.lineWidth = lineWidthInput.value;
});
// 更新颜色（如果不是橡皮擦模式）
colorPicker.addEventListener('change', () => {
if (!isEraser) {
ctx.strokeStyle = colorPicker.value;
}
});
// 清空画布
clearBtn.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// 切换橡皮擦模式
eraserBtn.addEventListener('click', () => {
isEraser = true;
ctx.strokeStyle = '#FFFFFF'; // 白色模拟擦除
eraserBtn.classList.add('active');
penBtn.classList.remove('active');
});
// 切换画笔模式
penBtn.addEventListener('click', () => {
isEraser = false;
ctx.strokeStyle = colorPicker.value;
penBtn.classList.add('active');
eraserBtn.classList.remove('active');
});
3. 功能说明与扩展建议
这个画板已具备基础功能，以下是关键点说明：
立即学习“前端免费学习笔记（深入）”；
-
Canvas绘图原理：通过监听鼠标事件，在
mousedown时开始路径，mousemove时不断绘制线条，mouseup时结束。 -
颜色与线宽调节：使用
input[type=color]和input[type=range]实时控制画笔属性。 - 橡皮擦实现：本质是切换为白色画笔，在白色背景上“覆盖”内容，适用于简单场景。
-
清空画布：
clearRect()方法清除整个区域。
可进一步扩展的功能包括：保存图像为PNG、撤销操作、更多笔刷样式、触摸设备支持等。
4. 完整性与兼容性提示
确保在现代浏览器（Chrome、Firefox、Edge、Safari）中测试。移动端需添加触摸事件支持（touchstart, touchmove, touchend），转换触摸坐标即可适配手机和平板。
基本上就这些，不复杂但容易忽略细节。只要理解Canvas的绘图流程和事件绑定机制，就能灵活扩展出更丰富的绘图工具。
