我创建了一个简单的脚本来测试 Ccapture。 它运行良好，但 webm 导出的质量非常差（形状的边缘非常像素化），即使选项设置为“质量：100”。
我夸大了对比度（绿色背景和红色形状）以显示质量。
有人能告诉我如何改善结果吗？
谢谢。
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="myCanvas" width="960" height="540" style="border:1px solid black"></canvas>
<br/>
<button onclick="startRecording()">Démarrer l'enregistrement</button>
<button onclick="stopRecording()">Arrêter l'enregistrement</button>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let t=0;
let duration = 120;
let startSize = 100;
let startX = (canvas.width - startSize) / 2;
let startY = (canvas.height - startSize) / 2;
let endSize = startSize * Math.sqrt(2);
let endX = (canvas.width - endSize) / 2;
let endY = (canvas.height - endSize) / 2;
function startRecording() {
t = 0;
capturer.start();
animation();
}
function stopRecording() {
capturer.stop();
capturer.save();
}
function animation(){
let size = startSize + (endSize - startSize) * t / duration;
let x = startX + (endX - startX) * t / duration;
let y = startY + (endY - startY) * t / duration;
ctx.fillStyle = "green";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
if (t < duration / 2) {
ctx.fillStyle = "red";
ctx.rect(x, y, size, size);
} else {
ctx.fillStyle = "red";
ctx.arc(x + size / 2, y + size / 2, size / 2, 0, Math.PI * 2);
}
ctx.fill();
if (capturer && capturer.capture) {
capturer.capture(canvas);
}
if (t < duration) {
requestAnimationFrame(animation);
t++;
} else if (capturer && capturer.save) {
capturer.stop();
capturer.save();
}
}
</script>
<script src="https://www.clicktorelease.com/code/conway3d_ccapture/js/CCapture.all.min.js"></script>
<script>
var capturer = new CCapture( {
format: 'webm',
framerate: 60,
name: 'visualization',
quality: 100,
verbose: true
} );
</script>
</body>
</html>
PS：我把它全部保存在一个文件中，这样人们就可以轻松地复制粘贴并进行测试。 如果你想让我把 html 和 js 分开，尽管问。
谢谢。