将canvas绘制过程导出为视频

MediaRecorder

接口的captureStream()属性 HTMLMediaElement返回一个MediaStream对象，该对象正在流式传输对媒体元素中呈现的内容的实时捕获。

var stream = canvas.captureStream();

MediaRecorder.ondataavailable 事件处理程序，注册 ondataavailable 事件，将数据记录下来

var recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
        var data = [];
        recorder.ondataavailable = function (event) {
            if (event.data && event.data.size) {
                data.push(event.data);
            }
        };

此处有文档：https://developer.mozilla.org/zh-cn/docs/web/api/mediarecorder/ondataavailable

开始监听,在绘制开始时开始录制

recorder.start();

绘制结束时结束录制

recorder.stop()

监听录制结束,将录制的内容（blob）通过URL.createObjectURL指向资源地址，赋值给video进行播放

recorder.onstop = () => {
            var url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
            document.querySelector("video").src = url;
            document.querySelector("video").style.display = 'block'
        };

完整代码

DOCTYPE html>


    
    web03.cn
    
        #canvas{ display: block; border: 1px solid #e06a6a; margin: 10px auto;}
        video{
            margin: auto;
            border: 1px solid #0e80d2;
            display: none;
        }
    



    当前浏览器不支持Canvas，请下载最新的浏览器！



    window.onload = function(){
        var timer = null;
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');
        //设置画布的宽高
        canvas.width = 400;
        canvas.height = 400;
        context.fillStyle="#FFFFFF";
        context.fillRect(0,0,canvas.width,canvas.height);
        var drawList = []
        var step = 0
        var drawObj = [
            {
                start: 1,
                end: 3,
                step: 0.05,
                draw: function (n){
                    drawRound(200,200,100,Math.PI,n*Math.PI)
                }
            },
            {
                start: 1,
                end: 2,
                step: 0.05,
                draw: function (n){
                    drawRound(160, 175,20,Math.PI,n*Math.PI)
                }
            },
            {
                start: 1,
                end: 2,
                step: 0.05,
                draw: function (n){
                    drawRound(240, 175,20,Math.PI,n*Math.PI)
                }
            },
            {
                start: 3,
                end: 2,
                step: -0.05,
                draw: function (n){
                    drawRound(200, 200,50, n*Math.PI, Math.PI)
                }
            }
        ]
        timer = setInterval(function(){
            var drawItem = drawObj[step]
            // context.clearRect(0,0,400,400);
            for (var i = 0; i  0 && drawItem.start  {
            var url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
            document.querySelector("video").src = url;
            document.querySelector("video").style.display = 'block'
        };
        recorder.start();
    }

Demo地址：https://yuan30-1304488464.cos.ap-guangzhou.myqcloud.com/blog/files/5d276a1b824d4da485faca362e354ef8.html