HTML Canvas画笔与橡皮擦功能失效问题求助

核心问题1：初始化函数未执行 #

你定义了InitThis函数，但没有在页面加载时触发执行，导致画笔、橡皮擦的点击事件从未被绑定，所以点击按钮毫无反应。

修复方法：在代码末尾添加初始化调用，确保DOM加载完成后执行初始化逻辑：

// 确保DOM加载完成后初始化功能
document.addEventListener('DOMContentLoaded', function() {
    InitThis();
});

核心问题2：绘制时强制覆盖画笔颜色 #

你的Draw函数里，每次绘制都会强制设置ctx.strokeStyle = $('#selColor').val();，这会直接覆盖通过按钮设置的黑色/白色，导致按钮的颜色设置完全失效。

修复方法：

1. 移除Draw函数中硬编码的ctx.strokeStyle = $('#selColor').val();代码；
2. 如果需要保留颜色选择器功能，可以新增全局变量存储当前画笔颜色，让按钮和颜色选择器共同修改这个变量，绘制时使用该变量：

// 新增全局变量存储当前画笔颜色
var currentColor = '#000000';

// 修改按钮点击事件逻辑
$("#pen").click(function() {
    currentColor = "#000000";
    ctx.strokeStyle = currentColor;
});

$("#erase").click(function() {
    currentColor = "#FFFFFF";
    ctx.strokeStyle = currentColor;
});

// 给颜色选择器添加变更事件（可选，保留原颜色选择功能）
$("#selColor").change(function() {
    currentColor = $(this).val();
    ctx.strokeStyle = currentColor;
});

// 修改Draw函数使用全局颜色变量
function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = currentColor;
        ctx.lineWidth = $('#selWidth').val();
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x;
    lastY = y;
}

次要问题：变量拼写错误 #

代码末尾存在拼写错误：var hea der = document.getElementById("myDIV");，正确写法应为var header = document.getElementById("myDIV");，否则按钮的active状态切换功能会失效。

修复方法：修正拼写错误：

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}

额外优化建议 #

如果你的画布是透明背景，橡皮擦用白色覆盖会留下白色痕迹，更推荐使用图层混合模式实现真正的擦除效果：

$("#erase").click(function() {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.strokeStyle = 'rgba(0,0,0,1)'; // 此处颜色不影响擦除效果，只要存在透明度即可
});

$("#pen").click(function() {
    ctx.globalCompositeOperation = 'source-over'; // 恢复正常绘制模式
    ctx.strokeStyle = "#000000";
});

内容的提问来源于stack exchange，提问作者Adilene