html - 在 Canvas 上播放视频并保留 Canvas 上的最后一帧/图像

Question

我正在使用以下脚本代码在 Canvas 上绘制视频:

$("#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 属性时以及在视频加载期间， Canvas 显示白屏。如何保留视频的最后一张图像而不清除 Canvas ？

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

Answer 1

每次设置 Canvas 大小时，它都会被清除。

为避免这种情况，您需要在开始绘制之前将尺寸设置为“开始”。在这种情况下，我建议您将它设置在事件处理程序之外以及 Canvas 和上下文变量的初始化:

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
       }
   })();
});