来自视频元素的drawImage行为不正常，分辨率混乱

Question

我浪费了无数个小时试图弄清楚为什么Canvas没有使用drawImage函数从视频元素中正确绘制数据。

以下片段是我最初尝试的，目的只是将准确的视频输出输出到我的画布：

this.canvasContext.drawImage(this.mainVideoElement, 0, 0);

然而，这只输出了视频元素当前内容左上角的一个小矩形。然后，我尝试了drawImage文档中定义的各种参数的变化，即使在手动定义了我的高度/宽度后，我的Canvas中的分辨率也明显低于视频内容(至少5-10倍(。

Answer 1

令我沮丧的是，整个问题源于我在css文件中使用"px"单位设置Canvas大小。在html定义中直接设置宽度和高度后，它开始正常工作并再次输出高分辨率。

显然，使用"px"单元完全破坏了Canvas关于drawImage函数的行为。我太累了，无法进一步研究，但如果drawImage行为不端，请确保使用width和height属性直接在html中定义画布大小。

编辑：或者，我发现您可以使用CSS来设置画布大小。在调用drawImage之前，只需确保在JavaScript中执行以下操作：

this.mainCanvasElement.width = this.mainCanvasElement.clientWidth;
this.mainCanvasElement.height = this.mainCanvasElement.clientHeight;