HTML5的Canvas元素是前端实现绘图功能的核心载体，通过JavaScript操作Canvas的2D绘图上下文，就能开发出功能完善的在线画板，支持自由绘制、样式调整、画布清空等常用操作。
在线画板基础结构搭建
首先需要在页面中创建Canvas画布，以及功能控制区域的相关元素，基础HTML结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5在线画板</title>
<style>
.container {
width: 1000px;
margin: 20px auto;
}
.tool-bar {
margin-bottom: 15px;
padding: 10px;
background: #f5f5f5;
border-radius: 4px;
}
.tool-bar button, .tool-bar input {
margin-right: 15px;
vertical-align: middle;
}
#drawCanvas {
border: 1px solid #ccc;
background: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="tool-bar">
<label>画笔颜色：<input type="color" id="colorPicker" value="#000000"></label>
<label>线条粗细：<input type="range" id="lineWidth" min="1" max="20" value="2"></label>
<button id="clearBtn">清空画布</button>
</div>
<canvas id="drawCanvas" width="800" height="500"></canvas>
</div>
</body>
</html>
核心绘图逻辑实现
在线画板的核心是通过监听鼠标事件，在Canvas上实时绘制路径，主要逻辑分为以下几步：
初始化绘图上下文
首先获取Canvas元素，得到2D绘图上下文，并设置默认的绘图样式：
// 获取Canvas元素和绘图上下文
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');
// 设置默认绘图样式
ctx.strokeStyle = '#000000'; // 默认画笔颜色
ctx.lineWidth = 2; // 默认线条粗细
ctx.lineCap = 'round'; // 线条端点圆润
ctx.lineJoin = 'round'; // 线条交汇处圆润
鼠标事件监听实现绘制
通过监听鼠标按下、移动、抬起事件，记录绘制路径并实时渲染：
let isDrawing = false; // 标记是否正在绘制
let lastX = 0; // 上一次绘制的x坐标
let lastY = 0; // 上一次绘制的y坐标
// 鼠标按下事件：开始绘制，记录起始坐标
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
// 获取鼠标在Canvas内的坐标
const rect = canvas.getBoundingClientRect();
lastX = e.clientX - rect.left;
lastY = e.clientY - rect.top;
});
// 鼠标移动事件：正在绘制时，从上次坐标到当前坐标画线条
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
const rect = canvas.getBoundingClientRect();
const currentX = e.clientX - rect.left;
const currentY = e.clientY - rect.top;
// 开始绘制路径
ctx.beginPath();
// 移动到上次坐标
ctx.moveTo(lastX, lastY);
// 画到当前坐标
ctx.lineTo(currentX, currentY);
// 渲染线条
ctx.stroke();
// 更新上次坐标
lastX = currentX;
lastY = currentY;
});
// 鼠标抬起事件：结束绘制
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
// 鼠标移出Canvas区域：结束绘制
canvas.addEventListener('mouseleave', () => {
isDrawing = false;
});
功能控制实现
接下来实现画笔颜色切换、线条粗细调整、清空画布的功能：
// 颜色选择器切换画笔颜色
const colorPicker = document.getElementById('colorPicker');
colorPicker.addEventListener('change', (e) => {
ctx.strokeStyle = e.target.value;
});
// 线条粗细调整
const lineWidthInput = document.getElementById('lineWidth');
lineWidthInput.addEventListener('input', (e) => {
ctx.lineWidth = e.target.value;
});
// 清空画布
const clearBtn = document.getElementById('clearBtn');
clearBtn.addEventListener('click', () => {
// 清除整个Canvas区域的内容
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
功能扩展建议
基础的在线画板实现后，还可以扩展更多实用功能：
- 添加橡皮擦功能，切换为白色画笔模拟擦除效果
- 支持保存绘图结果，通过
canvas.toDataURL()方法将画布内容转为图片下载 - 添加绘制形状功能，比如矩形、圆形、直线的绘制模式
- 支持撤销和重做操作，通过记录绘制步骤的历史栈实现
整个在线画板的实现核心是理解Canvas的2D绘图上下文操作方法，以及鼠标事件和绘图逻辑的联动，掌握这些基础后可以根据需求灵活扩展功能。