Html5 canvas 顶部带有淡色的帆布<；视频>；

我正在使用代码创建淡入淡出的轨迹。它使用

context.fillStyle='rgba（0,0,0,0.12）'以创建淡入淡出。问题是我想在
元素上使用淡入淡出的轨迹，淡入淡出隐藏
元素

有没有一种方法可以使画布在不隐藏的情况下在
的顶部具有淡入淡出效果？
您可以使用全局alpha将视频元素绘制到画布上-

更新

要同时启用淡出，您可以使用此修改后的代码（演示使用按钮触发淡出，但您可以在任何位置启动淡出设置
fade=true
）：


这将从先前绘制的帧中留下视频轨迹，并允许您淡出视频以保留轨迹

这只是一个简单的例子，也是很多方法中的一种——根据自己的需要进行调整

要重新启动视频，请设置
fade=false
，
fadeVal=1
并调用
loop（）
+1 globalAlpha的良好使用。顺便说一句（完全脱离主题），您的easyCanvas非常值得一看——在那里也做得不错！
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();