关于javascript：canvas clearrect，带有alpha


canvas clearrect, with alpha

所以我知道context.clearRect使像素透明，但是我想知道，是否存在使像素半透明的功能？

例如，假设我有一个具有这些颜色的画布(每种颜色的第四个是alpha)：

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

运行clearRect会解决此问题(或使其完全透明)：

1
2
#fff0 #fee0 #abf0
#5f60 #0000 #fff0

我想删除不透明性，但不希望使其透明(对于clearRect类似于globalAlpha)，这样它就可以像这样结束(假设我将globalAlpha设置为0.5)：<铅>

1
2
#fff8 #fee8 #abf8
#5f68 #0008 #fff8

这可能吗？还是将所有内容绘制在屏幕外的画布上，然后在屏幕上的画布(设置为globalAlpha)上绘制会更简单吗？

让我知道是否不清楚。

相关讨论

上面的答案可以完成工作，但是getImageData太慢了，如果有很多其他事情在进行，它将极大地减慢动画的速度。如果创建第二个屏幕外画布元素，则可以将其全局alpha设置为.9并来回拖曳它们，以更快的速度获得相同的效果。

1
2
3
4
5
6
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.
相关讨论

我也试图弄清楚这一点，所以我决定对像素进行计数，手动设置每个像素的Alpha通道。这还需要更多的工作，因为我不能只用rect覆盖整个画布，但是到目前为止，它已经可以工作了。

我正在这样做，以便我可以为网页设置背景图像并将画布动画置于其上，而不必在canvas元素中绘制背景。

1
2
3
4
5
6
7
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);
相关讨论