Question

我想在画布上画一个视频。

我希望视频在画布上看起来与没有画布的情况相同。

然而，质量很差。

以下是源视频： https://media.w3.org/2010/05/sintel/trailer.mp4

这是一个显示可怕质量的小提琴：https://jsfiddle.net/hup1cywc/

以下是小提琴的等效代码：

<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" style="width: 854px; height: 480px"></canvas>
        <script type="text/javascript">
        var context = canvas.getContext('2d');
        var video = document.createElement('video');
        video.type = 'video/mp4';
        video.src = 'https://media.w3.org/2010/05/sintel/trailer.mp4';
        video.addEventListener('canplaythrough', function() {
            video.play();
            animate();
        });
        function animate() {
            requestAnimationFrame(animate);
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
        }
        </script>
    </body>
</html>

为什么质量这么差？

Answer 1

因为我是通过CSS设置画布宽度和高度，所以画布内部比视觉上占据屏幕的像素小得多。

当绘制到<canvas>时，为什么<video>的质量大幅降低？

1 个答案: