将canvas绘制过程导出为视频

【03】

已于 2022-06-23 09:36:35 修改

阅读量2.9k

点赞数 2

分类专栏： javascript 文章标签：前端

于 2021-02-05 09:25:16 首次发布

本文链接：https://blog.csdn.net/weixin_43840202/article/details/113663332

版权

javascript 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

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>
<html>
<head>
    <meta charset="UTF-8">
    <title>web03.cn</title>
    <style type="text/css">
        #canvas{ display: block; border: 1px solid #e06a6a; margin: 10px auto;}
        video{
            margin: auto;
            border: 1px solid #0e80d2;
            display: none;
        }
    </style>
</head>
<body>
<canvas id="canvas">
    当前浏览器不支持Canvas，请下载最新的浏览器！
</canvas>
<video width="300"
       height="300"
       controls="true"
       autoplay="true"
></video>
<script>
    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 < drawList.length; i++) {
                drawList[i].draw(drawList[i].end)
            }
            if (!drawItem){
                setTimeout(function (){
                    // 结束录制
                    recorder.stop()
                },100)
                return clearInterval(timer)
            }
            if ((drawItem.step > 0 && drawItem.start <= drawItem.end) || (drawItem.step < 0 && drawItem.start >= drawItem.end)){
                drawItem.start = drawItem.start + drawItem.step
                drawItem.draw(drawItem.start)
            } else {
                step = step + 1
                drawList.push(drawItem)
            }
        },30);

        // 绘制圆的方法
        function drawRound(x,y,r,startPi,endPi){
            context.strokeStyle = '#d4d4d4';
            context.lineWidth = 4;
            context.beginPath();
            context.arc(x,y,r,startPi,endPi,false);
            context.stroke();
            context.closePath();
        }
        // 开始录制
        var stream = canvas.captureStream();
        var recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
        var data = [];
        recorder.ondataavailable = function (event) {
            if (event.data && event.data.size) {
                data.push(event.data);
            }
        };
        recorder.onstop = () => {
            var url = URL.createObjectURL(new Blob(data, { type: 'video/webm' }));
            document.querySelector("video").src = url;
            document.querySelector("video").style.display = 'block'
        };
        recorder.start();
    }
</script>
</body>
</html>

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

【03】

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
将canvas绘制过程导出为视频

MediaRecorder接口的captureStream()属性 HTMLMediaElement返回一个MediaStream对象，该对象正在流式传输对媒体元素中呈现的内容的实时捕获。var stream = canvas.captureStream();MediaRecorder.ondataavailable 事件处理程序，注册 ondataavailable 事件，将数据记录下来var recorder = new MediaRecorder(stream, { mimeType:
复制链接

扫一扫