如何将Canvas绘制过程转为视频 

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

 

posted @ 2020-08-17 07:09  wing1377  阅读(913)  评论(0)    收藏  举报