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

Question

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

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

我怎样才能让它 50% 透明？

Answer 1

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

来自w3schools.com：

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

Answer 2

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

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

（感谢How to change the opacity (alpha, transparent) of an element in an canvas element after it has been drawed?）