WebM 到 Canvas 的透明度搞砸了答案

【问题标题】：WebM to Canvas Transparency messed upWebM 到 Canvas 的透明度搞砸了
【发布时间】：2019-05-04 03:55:14
【问题描述】：

我最初的问题是我有 3 个视频文件需要播放，没有间隙或重叠，可见性和不透明度存在这些问题。

我的新想法是将所有内容都写到画布上，但透明度似乎搞砸了。

我已经尝试过预乘 alpha 和直接。

视频标签可以完美地处理它们。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('video');

// set canvas size = video size when known
video.addEventListener('loadedmetadata', function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
});

video.addEventListener('play', function() {
  var $this = this; //cache
  (function loop() {
    if (!$this.paused && !$this.ended) {
      ctx.drawImage($this, 0, 0);
      setTimeout(loop, 1000 / 60); // drawing at 30fps
    }
  })();
}, 0);

<div id="theater">
<video width="auto" controls="false" height="auto" autoplay="true" id="video" class="stack">
  <source src="http://njastad.com/telenorligaen/straight.webm" type="video/webm">
</video>
  <canvas id="canvas"></canvas>
  <label>
    <br />Try to play me :)</label>
  <br />
</div>

有什么想法吗？

【问题讨论】：

标签： javascript canvas transparency alpha webm

【解决方案1】：

为了清除画布可以使用：

ctx.clearRect(0, 0, canvas.width, canvas.height);

然后

ctx.drawImage(video, 0, 0);

注意：clearRect 的所有参数都是必需的

【讨论】：

【解决方案2】：

没关系，我只是忘了清除每一帧之间的画布...

【讨论】：