ここから本文です

Javascript における imageData のアルファ(透明度)について、うまくいきません...

lit********さん

2012/10/217:16:44

Javascript における imageData のアルファ(透明度)について、うまくいきません。二つのイメージを重ねたときに、アルファの値を下げることによって下のイメージが透けてみえるようにしたいのですが、透けません。

具体的には以下のコードで試しているのですが、後に putImageData() したイメージが完全に塗りつぶされ、透けません。

// 二つの四角形を部分的に重ねて表示

context.fillStyle = 'rgb( 255, 0, 0 )';
context.fillRect( 0, 0, 200, 200 );
imageData = context.getImageData( 0, 0, 200, 200 );
context.putImageData( imageData, 200, 200 ); // 赤い四角形をputImageData()

context.fillStyle = 'rgb( 0, 0, 255 )';
context.fillRect( 200, 0, 200, 200 );
imageData = context.getImageData( 200, 0, 200, 200 );
var length = 200 * 200 * 4;
for ( var i=0; i < length; i+=4 ) {
imageData.data[i+3] = 50; // 青い四角形のアルファを下げる
}
context.putImageData( imageData, 300, 300 ); // 青い四角形をputImageData()

そもそも imageData では透過処理ができないものなのでしょうか。
毎回 fillRect などでは処理が重いので、できれば imageData で処理したいのですが、ご教授いただければ幸いです。

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
767
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

pz_********さん

2012/10/218:49:55

結論から言うと、putImageData( )で、そのイメージの透過率を変えるのは無理なようです。

理由は・・・

imageData.data[i+3] = 50; // 青い四角形のアルファを下げる
これ↑の解釈なんですが・・・
そのアルファは、イメージの透過率ではなくて、Canvas自体の透過率みたいです。
ためしに 0 にすると、その領域で Canvas は完全に透過になります。

つまり・・・
×:イメージの透過率を 50 として、イメージを透明化して Canvas に書き込む。
○:透過率 50 を、そのイメージの領域の 「Canvas の透過率」とする。
・・・下が正しいみたいです。

context.globalAlpha も、putImageData( ) では効果がないようなので、
imageData の透過処理は無理なようです。

画像の表示、context.drawImage( ) は、context.globalAlpha が効果あるので、
画像にすれば、お望みのことはできます。

↓こんな感じで画像をプリロードしておきます。
var img = new Image();
img.src='hogehoge.jpg';
↓そして、透明度を指定して描画します。
context.globalAlpha = 0.5;
context.drawImage(img,0,0,300,300);

質問した人からのコメント

2012/10/5 18:14:08

ご回答ありがとうございます。やはりそうですよね。ご助言のとおり、一度pngのimageに変換してから表示することで解決いたしました。

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる