spritejs+canvas2video实现canvas动画转换视频文件代码

代码语言:html

所属分类:多媒体

代码描述:spritejs+canvas2video实现canvas动画转换视频文件代码

代码标签: spritejs canvas2video canvas 动画 转换 视频

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
        * {
            padding: 0;
            margin: 0;
          }
          #container {
            width: 300px;
            height: 300px;
            background: black;
          }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/spritejs.3.4.24.js"></script>
</head>

<body>
    <div style="width: 300px; margin: auto;">
   
        <div id="container"></div>
        <div id="videoContainer" style="display: none;">
            <h2>视频</h2>
            <video width="300" height="300" controls="true" autoplay="true" id="video"></video>
        </div>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/canvas2video.js"></script>

    <script>
        const { Scene, Label, Group } = spritejs;
          const container = document.getElementById("container");
          const scene = new Scene({
            container,
            width: 300,
            height: 300,
          });
    
          const fglayer = scene.layer("fglayer", {
            bgcolor: 'red'
          });
          // fglayer.canvas.style.backgroundColor = "#3f097a";
    
          const group = new Group();
          group.attr({
         .........完整代码请登录后点击上方下载按钮下载查看

网友评论0