0
私はキャンバスにビデオを描きたい。<canvas>に描画されたときに、<video>の品質が大幅に低下するのはなぜですか？
キャンバスを使わずに描いた場合と同じように、ビデオはキャンバス上で同じように見えます。
しかし、品質はひどいです。
ここでソースビデオさ： 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>
なぜ品質がありますとても貧乏？
キャンバスのサイズをCSSで設定しないでください。その代わりにwidth属性とheight属性を使用してください。 – Kaiido
母、ええ、それを考え出しましたが、ありがとう！ – Joncom