不应用不透明度 JavaScript Canvas

Question

我在鼠标移动和按下 i 时调用我的方法 drawInventory()。

我在 drawInventory 方法开始时设置了不透明度：

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

当我移动鼠标时，不透明度正确地保持在 0.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，它并没有改变问题。

感谢任何帮助。

Answer 1

一个canvas对象是一个图像并且最初是完全透明的。

当您使用上下文在其上绘图时，像素会发生变化以反映您的绘图。

如果您第二次在上面绘制，您将从 canvas 上当前的内容开始，这就是为什么在您看来没有应用不透明度的原因；原因是它已应用，但应用于已经不完全透明的像素。

请注意，隐藏和显示元素不会擦除其内容。每个 canvas 实例都会记住其像素值，即使您将它移动到 DOM 树中也是如此。

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

清除canvas

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

或通过设置 canvas 对象大小

canvas.width = canvas.width;

因为调整 canvas 的大小有记录的副作用，即使大小保持完全相同，也会清除其内容。

不应用不透明度 JavaScript Canvas

Opacity Not Applying JavaScript Canvas

javascript

jquery

css

html5-canvas