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

Question

假设我使用以下方法绘制矩形的HTML5元素：

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

如何让它透明50％？

Answer 1

ClearRect删除那里的内容并将其留空。最好的方法是使用rgba fillStyle值，因为它只会使矩形（或您正在绘制的任何其他形状）透明。代码是：

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

（谢谢How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?）

Answer 2

使用globalAlpha。您还必须使用fillRect绘制。 clearRect只是擦除像素。它无法部分擦除，因此您必须使用fillRect或其他绘图基元。

来自w3schools.com：

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