html5-canvas - 上にフェードがあるキャンバス

Question

このコードを使用してフェード トレイルを作成しています。context.fillStyle = 'rgba(0,0,0,0.12)';フェードを作成するために使用します。問題は、要素の上にフェードトレイルを使用したいのですが<video>、フェードが要素を隠してしまうこと<video>です。

キャンバスを非表示にせずに上にフェードする方法はあり<video>ますか?

Answer 1

グローバルアルファを使用する代わりに、ビデオ要素をキャンバスに描画できます-

アップデート

フェードアウトも有効にするには、次の変更されたコードを使用できます (デモではボタンを使用してフェードアウトをトリガーしますが、どこの設定からでも開始できますfade = true)。

ONLINE DEMO

var fade = false;
var fadeVal = 1;

ctx.globalAlpha = 0.2; //adjust as needed

function loop() {

    /// draw frame from video at current global alpha
    if (video1) ctx.drawImage(video1, 0, 0, w, h);

    /// if fade = true start fade out
    if (fade === true) {

        /// we need to make opaque again or the black box
        /// will be transparent resulting in none-working effect
        ctx.globalAlpha = 0.2 + (1-fadeVal);

        /// set fill color for black box
        ctx.fillStyle = 'rgba(0,0,0,' + (1 - fadeVal) + ')';

        /// draw on top of video 
        ctx.fillRect(0, 0, w, h);

        /// speed of fade out
        fadeVal -= 0.02;
    }

    /// when faded out, stop loop (stop video too, not shown)
    if (fadeVal >= 0) requestAnimationFrame(loop);

}
loop();

これにより、以前に描画されたフレームからビデオ トレイルが残り、トレイルを維持したままビデオをフェードアウトできます。

これは必要最小限の例であり、これを行う多くの方法の 1 つにすぎません。必要に応じて調整してください。

設定したビデオを再開するにはfade = false、fadeVal = 1を呼び出しloop()ます。