1

私は HTMLcanvasで遊んでいて、最近、 で画像の不透明度を変更し始めましたcontext.globalAlpha。画像を自動的にフェードアウトさせる小さなスクリプトを書くのは楽しいだろうと思いました。画像の左側はglobalAlpha1 (完全に不透明)、右側globalAlphaは 0 (完全に透明) になります。

ソース画像の 1 ピクセル幅のスライスを取りglobalAlpha、徐々に減少する数値に設定してみました:

fadeCtx = fadeCanvas.getContext('2d');

for (var i = 0; i < sourceImage.width; i++) {
    fadeCtx.globalAlpha = (sourceImage.width - i) / sourceImage.width;
    console.log(fadeCtx.globalAlpha);
    fadeCtx.drawImage(sourceImage, i, 0, i + 1, sourceImage.height, i, 0, i + 1,    sourceImage.height);
}

(私のコードの JSFiddle )

しかし、これは効果がないようです。画像は所定の位置に描画されますが、全体が完全に不透明です。

不透明度を設定する方法について何か不足していますか? フィドルでわかるように、globalAlphaイメージ全体の設定に成功しました。「画像スライス」を描画しようとすると、効果がないように見えます。

4

1 に答える 1

5

修正：

http://jsfiddle.net/mattdlockyer/zNcRB/

src画像の幅とdst画像の幅としてi+1を使用して画像を描画していましたが、代わりに両方に1を使用しました。

本当の問題はdst画像の幅でしたが、src画像の幅に1を使用すると、パフォーマンスが向上する可能性があると思います。

fadeCtx.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);

お役に立てれば！

于 2013-01-22T17:19:04.613 に答える