畫布clearrect，與阿爾法

所以我知道context.clearRect使像素透明，但我想知道，是否有一個函數，使像素半透明？畫布clearrect，與阿爾法

例如，假設我有這些顏色的畫布（第四個在每個顏色是阿爾法）：

#ffff #feef #abff 
#5f6f #000f #ffff

運行clearRect就解決了這個（或東西，只是讓他們全部透明）：

#fff0 #fee0 #abf0 
#5f60 #0000 #fff0

我想刪除不透明度，但不能使它透明的（有點像globalAlpha爲clearRect），以便它可以結束這樣的（可以說，我設置globalAlpha相當於0.5）：

#fff8 #fee8 #abf8 
#5f68 #0008 #fff8

這可能嗎？或者只是在屏幕畫布上繪製所有內容，然後在屏幕上繪製該畫布（使用globalAlpha設置）會更簡單？

讓我知道，如果這不是明確的任何方式。

來源

2013-05-27 MiJyn

您可以使用'context.fillColor =「rgba（0-255，0-255，0-255，0-1）」'並使用fillRect。第四個參數是alpha值。 0是最大透明度，1是完全不透明的。 –

@gfcarv是的，這是我想要的，但我不想要一種顏色。我想刪除不透明（我使用運動模糊，我需要的背景是透明的） – MiJyn

檢查此線程：http://stackoverflow.com/questions/5304199/html-canvas-motion-blur-with-transparent -background我認爲使用離屏畫布會更簡單。您可以使用'getImageData'逐個更改像素顏色，並使用'putImageData'來反映畫布中的更改，但您不想那麼做，因爲效率非常低。 –

我只是試圖弄清楚這一點，我決定通過像素計數，手動設置每個像素的alpha通道。這是一個多一點的工作，因爲我不能只用一個矩形覆蓋整個畫布，但它工作到目前爲止。

我這樣做是爲了讓我可以爲網頁設置一個背景圖片，並將其畫布動畫置於其上，而無需在畫布元素中繪製背景。

var oldArray = context.getImageData(0,0,canvas.width,canvas.height); 
//count through only the alpha pixels 
for(var d=3;d<oldArray.data.length;d+=4){ 
    //dim it with some feedback, I'm using .9 
    oldArray.data[d] = Math.floor(oldArray.data[d]*.9); 
} 
sw.context.putImageData(oldArray,0,0);

來源

2013-06-24 21:48:11 user2275231

謝謝，雖然@ gustavo-carvalho給了我一個替代方案，我使用，這個直接回答我的問題=） – MiJyn

上面的回答能夠完成任務，但getImageData是超級慢，如果你有事情了很多其他的東西將你的動畫非常慢下來。如果您創建第二個屏幕外的canvas元素，您可以將其全局alpha設置爲.9，並將它們來回拖動，並以更快的速度獲得相同的效果。

context2.clearRect(0,0,width,height); 
context2.globalAlpha = .9; 
context2.drawImage(canvas1,0,0); 
context1.clearRect(0,0,width,height); 
context1.drawImage(canvas2,0,0); 
context1.the rest of the drawing that you are doing goes here.

來源

2014-11-06 02:55:46 hartwellalex

這是一個很好的解決方案，我建議任何人來這個線程認真考慮它。 –

畫布clearrect，與阿爾法

回答

相關問題