15

それでピクセルが透明になることは知っていcontext.clearRectますが、ピクセルを半透明にする機能はありますか？

たとえば、これらの色のキャンバスがあるとします (各色の 4 番目はアルファです)。

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

実行clearRectすると、これに解決されます（または何か、それらをすべて透明にするだけです）：

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

不透明度を削除したいのですが、透明にはしたくありません(のようなものglobalAlphaですclearRect)ので、最終的に次のようになります( globalAlpha0.5に相当するものを設定するとしましょう):

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

これは可能ですか？それとも、画面外のキャンバスにすべてを描画してから、そのキャンバス (globalAlphaセット付き) を画面上のキャンバスに描画する方が簡単でしょうか?

これが何らかの形で明確でない場合はお知らせください。

4

2 に答える 2

28

上記の答えで仕事は完了しますが、 getImageData は非常に遅く、他にも多くのことが進行中の場合、アニメーションが非常に遅くなります。2 番目のオフスクリーン キャンバス要素を作成すると、そのグローバル アルファを .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

私もこれを理解しようとしましたが、ピクセルごとに手動でアルファチャンネルを設定してカウントすることにしました。キャンバス全体を四角形で覆うことはできないため、これはもう少し作業が必要ですが、これまでのところ機能しています。

これを行っているのは、キャンバス要素に背景を描画しなくても、Web ページの背景画像を設定し、その上にキャンバス アニメーションを配置できるようにするためです。

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 に答える