在网页中实现画板功能，核心是基于HTML5的Canvas元素结合JavaScript的事件监听与绘制API来完成，通过监听鼠标在画布上的移动轨迹，将轨迹实时绘制到Canvas上即可实现基础绘图效果。
基础画板实现步骤
1. 初始化Canvas元素
首先需要在HTML中创建Canvas标签，设置合适的宽高，然后通过JavaScript获取该元素并拿到2D绘制上下文，后续所有绘制操作都基于这个上下文完成。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础画板</title>
<style>
#drawCanvas {
border: 1px solid #ccc;
cursor: crosshair;
}
</style>
</head>
<body>
<canvas id="drawCanvas" width="800" height="500"></canvas>
<script src="draw.js"></script>
</body>
</html>2. 绑定鼠标事件实现绘制
画板的核心逻辑是监听鼠标在Canvas上的按下、移动、抬起事件，按下时记录起点，移动时不断绘制路径，抬起时结束绘制。需要注意Canvas的坐标获取要基于自身的位置，避免页面滚动带来的偏移误差。
// draw.js
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');
// 绘制状态标记
let isDrawing = false;
// 记录上一次绘制的坐标
let lastX = 0;
let lastY = 0;
// 鼠标按下事件：开始绘制，记录起点
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.lineWidth = 2; // 线条粗细
ctx.lineCap = 'round'; // 线条端点圆角
ctx.strokeStyle = '#000'; // 线条颜色
// 开始绘制路径
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;
});扩展画板功能
1. 清空画布
可以通过clearRect方法清空整个Canvas区域，实现画布重置功能。
// 清空画布函数
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// 如果需要添加清空按钮，可以绑定点击事件
// const clearBtn = document.getElementById('clearBtn');
// clearBtn.addEventListener('click', clearCanvas);2. 调整画笔属性
可以通过修改上下文的lineWidth和strokeStyle属性，实现线条粗细和颜色的切换，通常可以搭配输入框或颜色选择器来让用户自定义。
// 调整线条粗细
function setLineWidth(width) {
ctx.lineWidth = width;
}
// 调整线条颜色
function setStrokeColor(color) {
ctx.strokeStyle = color;
}
// 示例：设置线条为红色，粗细为5
// setStrokeColor('#ff0000');
// setLineWidth(5);注意事项
- Canvas的宽高如果通过CSS设置，会导致绘制内容拉伸变形，建议直接在标签属性或JS中设置
canvas.width和canvas.height。 - 获取鼠标坐标时务必使用
getBoundingClientRect计算相对位置，否则页面滚动后坐标会出现偏移。 - 如果需要在移动端使用，还需要额外绑定
touchstart、touchmove、touchend事件，逻辑和鼠标事件类似。
JavaScriptCanvascanvas_drawing前端交互修改时间：2026-06-03 00:40:06