2017-03-04 2 views
0

Ich möchte ein Video auf die Leinwand zeichnen.Warum ist die Qualität von <video> drastisch reduziert, wenn auf <canvas> gezeichnet?

Ich erwarte, dass das Video auf der Leinwand gleich aussieht, als würde es ohne die Zeichenfläche gezeichnet.

Die Qualität ist jedoch schrecklich. Hier

ist das Quellvideo: https://media.w3.org/2010/05/sintel/trailer.mp4

Hier ist eine Geige die schreckliche Qualität zeigt: https://jsfiddle.net/hup1cywc/

Hier ist der Code-Äquivalent der Geige:

<!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> 

Warum ist die Qualität so arm?

+1

Legen Sie die Größe der Leinwand nicht mit CSS fest. Verwenden Sie stattdessen die Attribute width und height. – Kaiido

+0

Haha, yup, habe das herausgefunden aber danke! – Joncom

Antwort

1

Da ich Leinwand Breite und Höhe über CSS eingestellt, so war die Leinwand intern viel kleiner als Pixel, die visuell auf dem Bildschirm besetzt war.

Verwandte Themen