Canvas使用drawImage进行拉伸

Question

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

我正在使用ctx.drawImage()来展示视频。 奇怪的是，我的640x480视频效果很好而且没有拉伸。目前只在我的640x360视频中发生。

我创建了一个角度指令，可以将视频绘制到画布元素上，除拉伸外，它都可以正常工作。这是我将视频元素绘制到画布上的代码：

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

我保证视频的来源不会在底部产生拉伸瑕疵，如下图所示（你可以看到右下方拉伸的像素）。我的画布元素的初始宽度和高度是640x480，它将根据加载的视频的大小而改变。

Answer 1

让我知道如果这个CSS为你修复它，每当我使用canvas时我都需要它：

canvas {
    display: block;
}

canvas标记容易受到与img标记相同的陷阱，因为它会在其下方呈现额外的空间。将尺寸设置为HTML属性是正确的，这很痛苦。

Answer 2

我暂时没有与canvas合作，但您可以试试ctx.drawImage($this)，也可以requestAnimationFrame使用它代替setTimeout ：

scope.renderPlayer = function()
{
  var $this = this;
  canvas.width = player.width;    // if canvas is a Jquery Object, try canvas[0].width
  canvas.height = player.height;    // if canvas is a Jquery Object, try canvas[0].height

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