<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>如何将Canvas绘制过程转为视频</title>
<style>
html, body {
width： 100%;
height: 100%;
}
.main {
display: flex;
}
#videoContainer {
display: none;
}
</style>
</head>
<body>
<div class="main">
<canvas width="600" height='600'></canvas>
<div id="videoContainer">
<h2>视频</h2>
<video width='300' height='300' controls='true' autoplay='true' id='video'></video>
</div>
</div>
</body>
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// const {width, height}= canvas;
const width = canvas.width;
const height = canvas.height;
ctx.fillStyle = 'red';
function draw(rotation = 0){
// save()表示保存save函数之前的状态，restore()表示获取save函数保存的状态
// save()与restore()之间的程序并不影响restore()之后的程序
ctx.clearRect(0, 0, 1000, 1000);
ctx.save();
ctx.translate(width/ 2, height/ 2);
ctx.rotate(rotation);
ctx.translate(-width/ 2, -height/ 2);
// beginPath() 方法开始一条路径，或重置当前的路径。
ctx.beginPath();
ctx.rect(200, 200, 200, 200);
ctx.fill();
ctx.restore();
}
(function update(t){
draw(t/ 500);
// 在浏览器下次重绘之前继续更新下一帧动画
// 那么回调函数自身必须再次调用window.requestAnimationFrame()
requestAnimationFrame(update);
})(0);
const stream = canvas.captureStream();
const recorder = new MediaRecorder(stream, {mimeType: 'video/webm'});
const data = [];
recorder.ondataavailable = function(event){
if(event.data && event.data.size) {
data.push(event.data);
}
}
recorder.onstop = ()=>{
const url = URL.createObjectURL(
new Blob(data, {type:'video/webm'})
);
document.querySelector("#videoContainer").style.display = "block";
document.querySelector("video").src = url;
};
recorder.start();
setTimeout(()=>{
recorder.stop();
},6000);
</script>
</html>
