Question

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

例如，假设我有一个带有这些颜色的画布（每种颜色中的第四个是alpha）：

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

运行clearRect将解析为此（或者其他内容，只需将它们全部透明）：

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

我想删除不透明度，但不要让它透明（有点像globalAlpha的{{1}}），这样就可以这样结束了（假设我设置clearRect相当于0.5）：

globalAlpha

这可能吗？或者只是在屏幕外的画布上绘制所有内容，然后在屏幕上绘制该画布（使用#fff8 #fee8 #abf8 #5f68 #0008 #fff8设置）会更简单吗？

如果这一点不清楚，请告诉我。

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通道。这是一个更多的工作，因为我不能用rect直接覆盖整个画布，但它到目前为止工作。

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

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);

画布清晰，带有alpha

2 个答案: