不应用JavaScript画布的不透明度

当我移动鼠标并按下I时，我正在调用我的方法drawInventory（）

我在drawInventory方法的开头设置了不透明度：

 function drawInventory() {
inventoryCtx.fillStyle = "rgba(0, 0, 0, 0.7)";
inventoryCtx.fillRect(10, 10, invWidth-20, invHeight-20);
 }

当我移动鼠标时，不透明度正确地保持在.7，但是在按下I键后，不透明度降低

以下是我在I键上调用的方法：

    function toggleInventory() {
    if(!showInventory) {
        showInventory = true;
        $("#inventoryCanvas").removeClass("hideClass");
        drawInventory();
        $("#inventoryCanvas").fadeIn(1);
    }
    else {
        $("#inventoryCanvas").fadeOut(100);
        showInventory = false;
    }
};

奇怪的是，第一次刷新页面并按i键后，不透明度就出现了。如果我按两次I，它会以更高的不透明度（更暗）返回，然后下一次它完全变暗。我不知道为什么每次调用同一个方法时它都会失去透明度

注意：我已经尝试了inventoryCtx.globalAlpha，它不会改变问题

---

感谢您的帮助。

画布对象是图像，最初是完全透明的

但是，当您使用上下文在其上绘制时，像素会更改以反映您的图形

如果你在画布上再画一次，你会从画布上当前的东西开始，这就是为什么你觉得不透明度没有被应用的原因；原因是它被应用在已经不是完全透明的像素上

请注意，隐藏和显示元素不会擦除其内容。每个画布实例将记住其像素的值，即使您在DOM树中移动它

要在绘制时保持可重复的结果，需要在开始绘制过程时使用清除画布

canvas.clearRect(0, 0, canvas.width, canvas.height);

或者通过使用设置画布对象大小

canvas.width = canvas.width;

---

因为调整画布的大小有一个记录在案的副作用，即即使大小保持不变，也会清除其内容。

太好了！你给我的那行简单的代码解决了我的整个问题，谢谢你。当我移动鼠标时，我正在重新调整它的大小，这就是为什么它没有引起那里的问题。