HTML5 - 更改绘制矩形

的透明度比方说，我画用这个矩形的HTML5元素：HTML5 - 更改绘制矩形

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

我将如何让50％透明？

2012-05-07 nn2

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

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

2012-05-07 19:43:34

这使得整个画布透明（在Chrome ATLEAST） –

布赖恩，它不清除整个画布，只有你给它的大小和位置。这就是这4个数字;前两个是画布上的X坐标，然后是Y坐标，然后是要清除矩形的X和Y的大小。（请记住，Y值反而会随着它们下降而在画布中变大） –

请注意，您需要在这两行后面调用'ctx.globalAlpha = 1;'以防止进一步绘制调用（甚至以前不管你信不信）也不会部分透明。 –

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

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

2013-07-03 22:36:12

我更喜欢这个选择的答案，因为它在使用后并不影响所有绘图。 –

您可以保存和恢复上下文，以便通过使用环绕其他上下文更改的'ctx.save（）'和'ctx.restore（）'来全局性地生效。 –

我比较喜欢这个，因为它更具体一些：讨论填充的透明度（我想'清理'一个矩形），而不是任何操作的透明度。这两种解决方案需要4行（因为ctx.save（）和ctx.restore（）保留上下文）。无论如何，这两种解决方案对我都有好处。 – ddcovery

回答