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

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

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

---

如何使其50%透明？

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

发件人：

---

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

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

---

（谢谢）

这会使整个画布透明（至少在Chrome上）Brian，它不会清除整个画布，只会清除您提供的大小和位置。这就是那4个数字；前两个是画布上的X坐标，然后是Y坐标，然后是要清除的矩形的大小X和Y。（请记住，Y值在画布中下降时反而变大）注意，您需要调用

ctx.globalAlpha=1在这两行之后，以防止进一步的绘图调用（即使是以前的调用，信不信由你）也是部分透明的。你还需要确保在所有绘图发生之前调用
clearRect
，否则最终会产生“拖尾效应”（除非这是你打算做的——看起来有点整洁）。我更喜欢这个答案，因为它在使用后不会全局影响所有绘图。您可以通过使用
ctx.save（）
和
ctx.restore（）保存和还原上下文，使其不会全局影响
围绕您的其他上下文更改。与最流行的更改相比，我更喜欢这个，因为它更具体：谈论填充的透明度（我想“清理”一个矩形），而不是任何操作的透明度。这两种解决方案需要4行代码（因为ctx.save（）和ctx.restore（）可以保留上下文）。无论如何，这两种解决方案对我来说都是好的。
ctx.fillStyle = 'rgba(225,225,225,0.5)';
ctx.fillRect(25,72,32,32);