如果将konva.js 框架编写的canvas 进行canvas录制，将canvas动画录制成视频，下面代码是写的动画，想要进行下面的动画录制，知道的麻烦告诉一下，谢谢。

一只阔阔仔

已于 2024-08-20 11:12:42 修改

阅读量227

点赞数 2

文章标签： javascript 音视频开发语言

于 2024-08-20 11:08:23 首次发布

本文链接：https://blog.csdn.net/m0_64033476/article/details/141352942

版权

<!DOCTYPE html>

<!-- saved from url=(0045) -->

<html lang="zh-Hans" class="wds">



<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta content="no-transform" http-equiv="Cache-Control">

    <meta content="zh-CN" http-equiv="Content-Language">

    <!-- // 如果需要用到ffmpeg合并视频，需要将COEP和COOP打开，来确保ShareArrayBuffer能够正常使用/ -->

    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">

    </meta>

    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">

    </meta>



    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

        name="viewport">

    <script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script

</head>



<body>

   

    <div id="container"></div>

    <button id="btn">点击录制</button>

    <button id="btn1">点击录制1</button>

    <div id="image-box" style="display: flex; flex-direction: column;">

    </div>

    <script>

        const data = {

            startOffsetTime: 2870000,

            startTime: 2870000,

            endTime: 5250612,

            eleStartTime: 2870000,

            eleEndTime: 5250612,

            text: '默认文本',

            trackId: '65b2d90f-0b9a-5d25-0c22-a1ad92f5100e',

            id: '04640d8b-0060-368a-5de0-6a15350d209a',

            type: 4,

            locationTop: 819,

            locationLeft: 729,

            width: 462,

            height: 42,

            fontSize: 42,

            opacity: 1,

            fontFamily: '龙珠体 Regular',

            fontColor: '#000000',

            shadowColor: '#000000',

            shadowBlur: 5,

            shadowOpacity: 1,

            shadowAngle: 0,

            shadowOffsetX: 0,

            shadowOffsetY: 0,

            shadowEnabled: false,

            stroke: '#000000',

            strokeEnabled: false,

            strokeWidth: 2,

            backgroundEnabled: false,

            zIndex: 0,

            x: 0,

            y: 300,

            captionswitch: true

        }

        const {

            fontSize,

            trackId,

            text,

            id,

            opacity,

            fontFamily,

            fontColor,

            locationLeft,

            locationTop,

            zIndex,

            x, //中心点之间的距离差值x

            y, //中心点之间的距离差值x

            shadowColor,

            shadowBlur,

            shadowOffsetX,

            shadowOffsetY,

            shadowOpacity,

            shadowEnabled,

            stroke,

            strokeEnabled,

            strokeWidth,

            cornerRadius,

            fillEnabled,

            fillPatternImage,

        } = data;

        var stage = new Konva.Stage({

            container: 'container',   // id of container <div>

            width: 1000,

            height: 1000

        });



        // then create layer

        var layer = new Konva.Layer();



        // create our shape

        var node = new Konva.Text({

            x: 400, // 水平居中

            y: 500,

            text: '',

            fontSize: fontSize,

            fontFamily: fontFamily,

            fill: fontColor,

            opacity: opacity,

            shadowColor: shadowColor,

            shadowEnabled: shadowEnabled,

            shadowBlur: shadowBlur,

            shadowOpacity: shadowOpacity,

            shadowOffsetX: shadowOffsetX,

            shadowOffsetY: shadowOffsetY,

            data: data,

            stroke: stroke,

            strokeEnabled: strokeEnabled,

            strokeWidth: strokeWidth,

            fillEnabled,

            fillPatternImage,

            lineHeight: 1.1,

        });



        // add the shape to the layer

        layer.add(node);



        // add the layer to the stage

        stage.add(layer);



        // draw the image

        layer.draw();



        let frames = []; // 用于存储每一帧的图像URL

        // 打字机的动画

        const dzjAnimation = () => {

            let duration = 1500;  // 持续时间（毫秒）

            let fps = 25;         // 每秒帧数

            let frameInterval = 1000 / fps; // 每帧的间隔时间（毫秒）

            let charInterval = duration / text.length; // 每个字符的间隔时间（基于帧数分配）

            let elapsedTime = 0;

            let displayText = '默认文本'; // 用于构建并显示的部分文本

            // 假设有一个元素用于显示文本

            // 使用requestAnimationFrame可能更合适，因为它与屏幕刷新率同步

            let timer = setInterval(() => {

                elapsedTime += frameInterval; // 使用每帧的间隔时间

                // 计算在当前已过去的时间内应该显示多少个字符

                const charsToShow = Math.floor(elapsedTime / charInterval);

                // 更新显示的文本

                displayText = text.substring(0, charsToShow);

                node.text(displayText);

                layer.batchDraw();

                const frame = stage.toDataURL({

                    mimeType: 'image/png',

                    quality: 1.0,

                    pixelRatio: window.devicePixelRatio || 1

                });

                frames.push(frame); // 将帧添加到数组中

                // 如果已经显示完所有字符，则清除定时器

                if (charsToShow >= text.length) {

                    clearInterval(timer);

                    record()
                }

            }, frameInterval);

        }

        // 录制canvas动画



        document.getElementById('btn').addEventListener('click', () => {

            dzjAnimation();

        })

        document.getElementById('btn1').addEventListener('click', () => {

            getCanvasData();

        })

        const record = () => {

            frames.forEach((frame, index) => {

                const renderDom = document.getElementById('image-box');

                let image = document.createElement('img');

                image.src = frame;

                image.style.width = '500px';

                image.style.height = '500px';

                renderDom.appendChild(image);

            })

        }

    </script>

</body>



</html>

一只阔阔仔

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如果将konva.js 框架编写的canvas 进行canvas录制，将canvas动画录制成视频，下面代码是写的动画，想要进行下面的动画录制，知道的麻烦告诉一下，谢谢。

/ 每个字符的间隔时间（基于帧数分配）-- // 如果需要用到ffmpeg合并视频，需要将COEP和COOP打开，来确保ShareArrayBuffer能够正常使用/ -->let frameInterval = 1000 / fps;// 每帧的间隔时间（毫秒）// 使用每帧的间隔时间。// 用于构建并显示的部分文本。// 持续时间（毫秒）// 用于存储每一帧的图像URL。x, //中心点之间的距离差值x。y, //中心点之间的距离差值x。x: 400, // 水平居中。// 更新显示的文本。
复制链接

扫一扫