画布清晰,带有alpha

Question

所以我知道context.clearRect像素是透明的,但我想知道,有没有让像素半透明的功能？

例如,假设我有一个带有这些颜色的画布(每种颜色中的第四个是alpha):

#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设置)会更简单吗？

如果这一点不清楚,请告诉我.

Answer 1

上面的答案可以完成工作,但是getImageData非常慢,如果你有很多其他的东西,它会极大地降低你的动画速度.如果你创建了第二个屏幕外的画布元素,你可以将它的全局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.

Answer 2

我也只是想弄清楚这一点，并且我决定对像素进行计数，手动设置每个像素的 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);