HTML5 - 更改绘制矩形的不透明度

Question

假设我使用以下代码绘制一个HTML5矩形元素：

context.clearRect(25, 72, 32, 32);

我该如何使它透明度为50%？

- test

Answer 1

使用globalAlpha属性。您还需要使用fillRect进行绘制。clearRect只能擦除像素，无法部分擦除，因此您必须使用fillRect或其他绘图原语。

来自w3schools.com：

    ctx.globalAlpha = 0.2;
    ctx.fillRect(50,50,75,50);
    ctx.globalAlpha = 1.0;

- Fábio Santos

---

这会使整个画布透明（至少在Chrome上）。 - Brian Barnes

Brian，它不会清除整个画布，只会清除你给定的大小和位置。这就是那4个数字的含义；前两个是画布上的X坐标，然后是Y坐标，接着是您想要清除的矩形的大小X和Y。请记住，在Canvas中，Y值随着向下移动而变大。 - Super Fighting Robot

请注意，在这两行代码之后您需要调用 ctx.globalAlpha=1; 以防止进一步的绘制调用（甚至是先前的调用）也部分透明。 - Kevin Jurkowski

你还需要确保在所有绘制发生之前调用clearRect，否则你会得到一个 "尾随效应"（除非这是你想要的-看起来相当不错）。 - Kevin Jurkowski

Answer 2

ClearRect移除了已存在的内容并将其变为空白。最好的方法是使用rgba fillStyle值，因为它只会使矩形（或您正在绘制的任何其他形状）透明。代码如下：

ClearRect清空之前绘制的内容，使用rgba颜色填充矩形（或其他图形）可以使其变为透明。

ctx.fillStyle = 'rgba(225,225,225,0.5)';
ctx.fillRect(25,72,32,32);

（感谢如何在画布元素中绘制后更改元素的不透明度（alpha，透明度）？）

- Brian Barnes

---

我更喜欢这个答案，因为使用它后不会对所有的绘图产生全局影响。 - Kevin Jurkowski

您可以使用ctx.save()和ctx.restore()来保存和恢复上下文，以便它不会在全局范围内生效，并将其包装在其他上下文更改周围。 - Ian Jamieson

我更喜欢这个方案，因为它更具体：它讨论了填充的透明度（我想要“清除”一个矩形），而不是任何操作的透明度。这两种解决方案需要4行代码（因为需要使用ctx.save()和ctx.restore()来保留上下文）。无论如何，这两种解决方案对我来说都很好。 - ddcovery