Question

我使用以下脚本代码在画布上绘制视频：

$("#vPlayer").on('play', function (e) {
           var canvas = $('canvas')[0];
           var ctx = canvas.getContext('2d');
           var $this = this;
           canvas.width = 640;
           canvas.height = 480;
           (function loop() {
               if (!$this.paused && !$this.ended) {
                   ctx.drawImage($this, 0, 0, 640, 480);
                   setTimeout(loop, 1000 / 30); // drawing at 30fps
               }
           })();

});

代码效果很好，但在我的情况下，我想每2分钟更改一次视频标签的视频源（src属性）。当我为视频设置src attr时以及在视频的加载时间内，画布显示白屏。如何保留最后一段视频而不清除画布？

有点奇怪，因为当我没有设置画布的宽度和高度时，最后一帧被保留，但我需要设置大小。

先谢谢。

Answer 1

每次设置画布的大小时，它都会被清除。

要避免这种情况，您需要在开始绘制之前在“开始”处设置大小。在这种情况下，我建议你将它设置在事件处理程序之外，以及初始化画布和上下文变量：

var canvas = $('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width = 640;
canvas.height = 480;

$("#vPlayer").on('play', function (e) {
   var $this = this;
   (function loop() {
       if (!$this.paused && !$this.ended) {
           ctx.drawImage($this, 0, 0, 640, 480);
           setTimeout(loop, 1000 / 30); // drawing at 30fps
       }
   })();
});

在画布上播放视频并保留画布上的最后一帧/图像

1 个答案: