画布使用拉伸的drawImage [英] Canvas is stretching using drawImage

问题描述

我知道不必设置大小的＆LT;画布＆GT; 使用宽度和元素高度属性，避免伸展。我没有适用于它比其他背景颜色CSS。

I am aware of having to set the size of a <canvas> element using the width and height attribute to avoid stretching. I have no CSS applied to it other than background-color.

我使用 ctx.drawImage（）来显示视频。 奇怪的是，我的 640×480 视频播放罚款，没有被拉伸。它只是发生在我的现在640×360 视频。

I am using ctx.drawImage() to show a video. The weird thing is, my 640x480 video plays fine and is not stretched. It is only happening on my 640x360 videos for now.

我已经创建了一个角指令，视频绘制到画布元素，除了拉伸工作的。这里是我的code，吸引了视频元素拖到画布：

I have created an angular directive that draws video onto a canvas element and it all works except for the stretching. Here is my code that draws the video element onto the 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);

我向你保证视频的来源，在底部伸展伪影如下面的图像（你可以真正看到拉伸右下角的像素）没有。我的canvas元素的初始宽度和高度为640x480它将改变取决于加载视频的大小。

I assure you the source of the videos don't have that stretching artifacting on the bottom as shown in the image below (You can really see the pixels stretched on the bottom right). My initial width and height of the canvas element is 640x480 and it will change depending on the size of the loaded video.

推荐答案

让我知道，如果这个CSS修复它为你，我需要它，每当我用帆布：

Let me know if this CSS fixes it for you, I need it whenever I use canvas:

canvas {
    display: block;
}

在画布标签是容易在同一缺陷的 IMG 标记它呈现在它下面额外的空间。你是正确的设置尺寸HTML属性，虽然，什么是痛苦。

the canvas tag is susceptible to the same pitfalls as the img tag in that it renders extra space below it. You are correct to set the dimensions as HTML attributes though, what a pain.

这篇关于画布使用拉伸的drawImage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！