在基于HTML Canvas实现绘图工具时，画笔与橡皮擦功能失效是高频问题。多数情况下代码看似完整，但鼠标操作画布却毫无变化，这往往由事件绑定、坐标映射或绘图上下文状态异常引起。
常见失效原因
事件未正确绑定到Canvas
如果鼠标事件监听写在了错误的元素上，或者Canvas被上层透明元素遮挡，画笔自然不会生效。应确保mousedown、mousemove、mouseup绑定在canvas本身。
坐标计算错误
直接用event.clientX当作绘图坐标，会忽略画布在页面中的偏移。需要使用getBoundingClientRect进行修正。
橡皮擦模式未设置
橡皮擦本质是用globalCompositeOperation = 'destination-out'绘制。如果遗漏该设置，橡皮擦只会画出半透明黑色。
可用示例代码
下面给出一个最小可运行示例，包含画笔与橡皮擦切换：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Canvas绘图</title>
<style>
canvas { border: 1px solid #333; }
</style>
</head>
<body>
<button id="pen">画笔</button>
<button id="eraser">橡皮擦</button>
<canvas id="cv" width="400" height="300"></canvas>
<script>
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
var drawing = false;
var mode = 'pen'; // pen或eraser
document.getElementById('pen').onclick = function() {
mode = 'pen';
};
document.getElementById('eraser').onclick = function() {
mode = 'eraser';
};
// 绑定事件到canvas
cv.addEventListener('mousedown', function(e) {
drawing = true;
draw(e);
});
cv.addEventListener('mousemove', function(e) {
if (drawing) draw(e);
});
cv.addEventListener('mouseup', function() {
drawing = false;
ctx.beginPath();
});
function draw(e) {
var rect = cv.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
if (mode === 'eraser') {
// 橡皮擦使用destination-out
ctx.globalCompositeOperation = 'destination-out';
ctx.strokeStyle = 'rgba(0,0,0,1)';
} else {
ctx.globalCompositeOperation = 'source-over';
ctx.strokeStyle = '#000';
}
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
</script>
</body>
</html>
排查清单
- 确认事件监听挂在canvas而非父容器
- 使用getBoundingClientRect计算坐标
- 橡皮擦设置globalCompositeOperation为destination-out
- 每次mouseup后调用beginPath避免连笔异常
小结
画笔与橡皮擦失效通常不是Canvas能力限制，而是细节处理疏忽。对照上述代码与清单修改，基本可以恢复功能。若仍无效，可检查canvas尺寸是否被CSS拉伸导致坐标错位。
HTML_Canvas画笔功能橡皮擦功能修改时间：2026-07-26 21:48:17