15

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

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

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

运行clearRect会解决这个问题（或其他东西，只是让它们都透明）：

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

我想删除不透明度，但不让它透明（有点像globalAlphafor clearRect），所以它可以像这样结束（假设我设置globalAlpha为 0.5）：

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

这可能吗？或者只是在屏幕外的画布上绘制所有内容，然后在屏幕上的画布上绘制该画布（带有globalAlpha集合）会更简单吗？

让我知道这是否不清楚。

4

2 回答 2

28

上面的答案完成了工作，但是 getImageData 非常慢，如果你有很多其他的事情要做，它会极大地减慢你的动画。如果您创建第二个屏幕外画布元素，您可以将其全局 alpha 设置为 0.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-06T02:55:46.620 回答
4

我也只是想弄清楚这一点，我决定计算像素，手动设置每个像素的 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-24T21:48:11.857 回答