原创

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

JavaScript
html
css
  • 作者:零三(联系作者)
  • 最后更新时间:2021-01-15 18:30
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn
  • 评论