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

回答