使用recordrtc將畫布圖像記錄到視頻文件

Question

我正在嘗試使用canvas創建一些動畫，並使用RecordRTC將其保存為視頻文件，這段代碼非常完美，但是我很難獲得帶有圖像記錄的div。

<div style="display:none;" id="background_goa">
<img src="Http://domain/wp-content/themes/custom/images/top10-bg-goa.png'; ?>" />
</div>

function video_create(){
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0, 0, 150, 150);            
  var img = document.getElementById("background_goa");
  ctx.drawImage(img,100,100);
  // ctx.restore();
  window.requestAnimationFrame(top_video_create);       
}
window.requestAnimationFrame(top_video_create);

var recorder = RecordRTC(canvas, {
  type: 'canvas'
});

recorder.startRecording();

setTimeout(function(){
recorder.stopRecording(function() {
  var blob = recorder.getBlob();
  document.body.innerHTML = '<video controls src="' + URL.createObjectURL(blob) + '" autoplay loop></video>';
 });
}, 5000);

Answer 1

錯誤是使用ctx.restore（）; 基本上它的作用是在繪制后恢復整個畫布，它應該在將新元素繪制到畫布之前使用，以便在下一幀加載之前屏幕是空白的。