使用透明度/不透明度在间隔中填充canvas fillStyle。

Question

这段小代码会在间隔期内清除旧的画布数据：

// start interval
ctx.save();
    ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
    ctx.fillRect(0, 0, ctx.width, ctx.height);
ctx.restore();
//some draw code for new graph
...
//end interval

我的工作区变成了黑色，因为我将黑色设置为填充颜色（rgba(0, 0, 0, .2)），但我需要一个透明的背景，而不是黑色。

我尝试使用globalAlpha和imagePutData，但失败了。

我该怎么做？

- user951114

---

如果我清除矩形，它会清除所有旧数据，但我需要保存旧数据并为其设置不透明度（这就是为什么我使用rgba颜色模型），直到间隔使其完全透明。 - user951114

也许可以设置 ctx.globalCompositeOperation = 'destination-out' 然后进行绘制？ - c69

谢谢！我也尝试过使用globalCompositeOperation，但没有使用这个值。 - user951114

Answer 1

我认为这将解决你的问题

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

- Mubashar Shahzad

Answer 2

使用rgba(0,0,0,.2)的fillStyle和fillRect()方法可以在chrome和firefox上实现半透明黑色填充。请确保您没有执行其他导致完全不透明绘制的操作。

- broofa

Answer 3

尝试使用ctx.canvas.width，而不是ctx.width

- Soyoes

Answer 4

您的问题解决了吗？

我在使用Windows电脑时遇到了这个问题。

我使用了opacity: .99来解决这个问题。

- 高启明

---

嗨，高启明，请在下一次提问之前熟悉如何回答问题。祝您在 Stack Overflow 上玩得愉快 :) - Diggy.