爲什麼<video>的質量下降到<canvas>？

我希望視頻在畫布上看起來與在沒有畫布的情況下繪製相同。

但是，質量是可怕的。

這裏是源視頻： 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>

爲什麼質量好可憐？

來源

2017-03-04 Joncom

不要用CSS設置畫布的大小。改用其寬度和高度屬性。 – Kaiido

哈哈，喲，想通了，但謝謝你！ – Joncom

因爲我是通過CSS設置畫布寬度和高度，所以畫布在內部比屏幕上視覺上佔用的像素小得多。

來源

2017-03-04 00:52:41 Joncom

爲什麼<video>的質量下降到<canvas>？

回答

相關問題