キャンバスclearrect、アルファ

Question

だから私はcontext.clearRectがピクセルを透明にしていることを知っていますが、ピクセルを半透明にする機能はありますか？例えば

、（各色の4分の1がアルファである）私は、これらの色とキャンバスを持っていると言う：

clearRectを実行

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

は、このに解決する（または何か、ちょうどそれらすべてを透明に）なります

：私はそれがこの（私は0.5と同等 globalAlphaを設定すると言うことができます）ように終わることができるように、（ clearRect用 globalAlphaの種類など）、それを透明に不透明度を削除ではなく、したい

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

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

これは可能ですか？または、オフスクリーンのキャンバスにすべてを描画してから、そのキャンバスを（globalAlphaと設定して）画面上に描画する方が簡単ですか？

これは決してわからないことがありますか？

Answer 1

これを理解しようとしましたが、私はピクセルを数え、それぞれのアルファチャンネルを手動で設定しました。キャンバス全体を矩形で覆うことはできないので、これはもう少し作業ですが、これまでのところ動作しています。

キャンバス要素に背景を描画することなく、ウェブページの背景画像を設定し、その上にキャンバスアニメーションを配置できるように、これを行います。

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

Answer 2

答え上記の仕事を取得しますが、しかし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.