Javascript 如何在增加和减少数组中项目的不透明度之间切换？ 目标与问题

我正在创建一个项目，用户在画布上绘制正方形。当前，当鼠标悬停在正方形上时，不透明度将增加

我的目标是通过键盘键

p

和

e

在绘制和擦除模式之间切换。但是，我无法想出如何再次降低不透明度。如何实现此功能

实例：

我尝试过的事情 我曾尝试通过简单地使用减号操作符来降低不透明度，但没有成功

parseFloat(opacity) - 0.01;

可能是因为不透明度为零，而不是正方形的实际不透明度

我当前的代码： 这些是一个正方形对象的属性。（不透明度=0）

如果用户将鼠标悬停在正方形上，则会在此处更新颜色

squares.filter(function (square) {
    if (square.xPos == row && square.yPos == column) {
        square.color = `rgb(0,0,0, ${opacity(0)})`;
        updateCanvas(square)
    } 
})

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

function updateCanvas(square) {
    ctx.fillRect(square.yPos, square.xPos, square.xSize, square.ySize)
    ctx.fillStyle = square.color;
}

document.addEventListener('keydown', (event) => {
    if (event.key == 'e') {
        painting = false
        console.log('switch to eraser')
    }
    if (event.key == 'p') {
        painting = true
        console.log('switch to paintbrush')
    }
})

---

我希望当用户切换到橡皮擦模式时（

e

在键盘上），鼠标悬停时方块的不透明度应降低0.01。

您应该使用

document.getElementById（#id）.style.opacity=_opacity

此处_opacity是存储当前不透明度值的变量，#id是需要更新不透明度的元素的id
理想情况下，您应该将不透明度保存到（并在）方形对象上进行修改。按原样，
opacity（）
函数总是被赋予
0

squares.push({
   xPos: squareSize * i,
   yPos: squareSize * x,
   xSize: squareSize,
   ySize: squareSize,
   color: 'rgb(0,0,0,0)',
   opacity: 0.01
 })

然后将整个正方形传递给不透明度函数，以便对其进行修改

square.color = `rgb(0,0,0, ${opacity(square)})`;


然后，在绘制新正方形之前，需要清除现有正方形

function updateCanvas(square) {
    // CLear it and draw a new one..
    ctx.clearRect(square.yPos, square.xPos, square.xSize, square.ySize);
    ctx.fillStyle = square.color;
    ctx.fillRect(square.yPos, square.xPos, square.xSize, square.ySize)
}

这是一把小提琴



请注意，在使用JSFIDLE时，为了能够听到您的关键事件，您需要首先单击输出帧。
您不能使用css来设置画布的特定部分的样式。每个方块没有id。只有整个画布有id。我相信在调用
fillRect
之前必须设置
fillStyle
，这很有意义！我不知道如何清除现有的canvas元素（仍在学习canvas）。非常感谢您的帮助；）
// this returns an increased opacity value on mousehover.
function opacity(square) {
    if(!eraserActive){
      square.opacity += 0.1;
    }else{
      square.opacity -= 0.1;
    }
    return square.opacity;
}

function updateCanvas(square) {
    // CLear it and draw a new one..
    ctx.clearRect(square.yPos, square.xPos, square.xSize, square.ySize);
    ctx.fillStyle = square.color;
    ctx.fillRect(square.yPos, square.xPos, square.xSize, square.ySize)
}