画布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设置）会更简单？

让我知道，如果这不是明确的任何方式。

您可以使用'context.fillColor =“rgba（0-255，0-255，0-255，0-1）”'并使用fillRect。第四个参数是alpha值。 0是最大透明度，1是完全不透明的。 –

@gfcarv是的，这是我想要的，但我不想要一种颜色。我想删除不透明（我使用运动模糊，我需要的背景是透明的） – MiJyn

检查此线程：http://*.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);

谢谢，虽然@ 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.

这是一个很好的解决方案，我建议任何人来这个线程认真考虑它。 –

画布clearrect，与阿尔法

相关推荐