如何实现Canvas方块绘画/擦除模式下的透明度增减切换？

嘿，我一眼就看出问题所在了——你现在的代码根本没在跟踪每个方块的当前透明度，每次计算都从0开始，自然没法实现擦除时降低透明度的效果！咱们一步步来修复：

核心问题拆解 #

• 你的方块对象里只存储了color字符串，没有单独的opacity属性，导致每次更新都拿0当基础值计算，完全忽略了方块当前的实际透明度
• 调用opacity(0)时，不管绘画还是擦除，都是基于0做加减，擦除时会得到负数（这在CSS颜色里是无效的）
• updateCanvas里的绘制顺序搞反了：应该先设置fillStyle，再调用fillRect，否则新的样式不会生效

修复步骤与代码修改 #

1. 给方块添加独立的opacity属性

创建方块时，单独存储透明度值，而不是只放在color字符串里：

squares.push({ 
  xPos: squareSize * i, 
  yPos: squareSize * x, 
  xSize: squareSize, 
  ySize: squareSize, 
  opacity: 0, // 新增：单独存储透明度
  color: 'rgb(0,0,0,0)' 
})

2. 修改鼠标悬停的更新逻辑

现在要基于方块当前的opacity值来计算新的透明度，而不是传入0：

squares.filter(function (square) {
  if (square.xPos == row && square.yPos == column) {
    // 用方块当前的opacity作为参数传入
    square.opacity = opacity(square.opacity);
    // 确保透明度在0-1的有效范围内，避免出现无效值
    square.opacity = Math.max(0, Math.min(1, square.opacity));
    // 更新color字符串
    square.color = `rgb(0,0,0, ${square.opacity})`;
    updateCanvas(square);
  }
})

3. 简化opacity计算函数

现在这个函数只需要处理传入的当前透明度值即可：

function opacity(currentOpacity) {
  if(painting) {
    return parseFloat(currentOpacity) + 0.01;
  } else {
    return parseFloat(currentOpacity) - 0.01;
  }
}

4. 修正Canvas绘制顺序

fillStyle必须在fillRect之前设置，否则绘制时用的还是旧样式：

function updateCanvas(square) {
  ctx.fillStyle = square.color; // 先设置样式
  ctx.fillRect(square.yPos, square.xPos, square.xSize, square.ySize); // 再绘制
}

效果验证 #

现在切换到e（擦除模式）时，鼠标悬停方块会逐渐降低透明度（直到0），切换到p（绘画模式）时会逐渐增加透明度（直到1），完全符合你的预期！

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