javascript - 使用drawImage拉伸(stretch) Canvas

Question

我知道必须设置 <canvas> 的大小使用 width 的元素和height属性以避免拉伸(stretch)。除了背景颜色之外，我没有应用任何 CSS。

我正在使用ctx.drawImage()显示视频。 奇怪的是，我的640x480视频播放正常并且没有拉伸(stretch)。它只发生在我的640x360上现在的视频。

我创建了一个 Angular Directive(指令)，将视频绘制到 Canvas 元素上，除了拉伸(stretch)之外，它一切正常。这是我将视频元素绘制到 Canvas 上的代码:

scope.renderPlayer = function()
{
  var $this = this;
  attributes.width = player.videoWidth;
  attributes.height = player.videoHeight;
  canvas.setAttribute('width', attributes.width);
  canvas.setAttribute('height', attributes.height);

  (function loop()
  {
    if (!$this.paused && !$this.ended)
    {
      ctx.drawImage($this, 0,0, attributes.width, attributes.height);
      setTimeout(loop, 1000/30);
    }
  })();
};
player.addEventListener('play', scope.renderPlayer);

我向您保证，视频源的底部没有拉伸(stretch)伪影，如下图所示(您确实可以看到右下角拉伸(stretch)的像素)。我的 Canvas 元素的初始宽度和高度是 640x480，它将根据加载视频的大小而变化。

Answer 1

请告诉我这个 CSS 是否为您解决了这个问题，每当我使用 Canvas 时我都需要它:

canvas {
    display: block;
}

canvas 标签容易受到与 img 标签相同的缺陷的影响，因为它会在其下方呈现额外的空间。不过，您将尺寸设置为 HTML 属性是正确的，这真是太痛苦了。