Question

当我的鼠标移动和按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，它会以更高的不透明度（更暗）返回，然后在下一次完全黑暗时返回。我不知道为什么每次调用相同的方法时都会失去不透明度。

注意：我已经尝试过inventoryCtx.globalAlpha，它不会改变这个问题。

感谢任何帮助。

Answer 1

canvas对象是图像，最初是完全透明的。

使用上下文绘制时，会更改像素以反映您的绘图。

如果你第二次画它，你将从画布上的当前内容开始，这就是为什么你看来不适用不透明度;原因是它已应用但已经不完全透明的像素。

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

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

开始绘制过程时清除画布

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

或使用

设置画布对象大小

canvas.width = canvas.width;

调整画布大小具有清除其内容的文档副作用，即使大小保持完全相同。

不透明度不适用JavaScript Canvas

1 个答案: