时间:2011-01-06 17:59:53

标签: html5 animation webkit screenshot

8 个答案:

答案 0 :(得分:6)

有一个使用javascript和PHP到create a video from your canvas animation的代码教程。程序会像在电影中一样逐帧保存画布动画,然后您可以使用您选择的编解码器将此堆栈帧转换为特定的视频格式。

链接页面中的代码。

(function () {
    var canvas = document.getElementById('c'),
        c = canvas.getContext('2d'),
        w = canvas.width, h = canvas.height,
        p = [], clr, n = 200;

    clr = [ 'red', 'green', 'blue', 'yellow', 'purple' ];

    for (var i = 0; i < n; i++) {
        // generate particle with random initial velocity, radius, and color
        p.push({
            x: w/2,
            y: h/2,
            vx: Math.random()*12-6,
            vy: Math.random()*12-6,
            r: Math.random()*4+3,
            clr: Math.floor(Math.random()*clr.length)
        });
    }

    function frame() {
        // cover the canvas with 50% opacity (creates fading trails)
        c.fillStyle = 'rgba(0,0,0,0.5)';
        c.fillRect(0, 0, w, h);

        for (var i = 0; i < n; i++) {
            // reduce velocity to 99%
            p[i].vx *= 0.99;
            p[i].vy *= 0.99;

            // adjust position by the current velocity
            p[i].x += p[i].vx;
            p[i].y += p[i].vy;

            // detect collisions with the edges
            if (p[i].x < p[i].r || p[i].x > w-p[i].r) {
                // reverse velocity (direction)
                p[i].vx = -p[i].vx;
                // adjust position again (in case it already passed the edge)
                p[i].x += p[i].vx;
            }
            // see above
            if (p[i].y < p[i].r || p[i].y > h-p[i].r) {
                p[i].vy = -p[i].vy;
                p[i].y += p[i].vy;
            }

            // draw the circle at the new postion
            c.fillStyle = clr[p[i].clr]; // set color
            c.beginPath();
            c.arc(p[i].x, p[i].y, p[i].r, 0, Math.PI*2, false);
            c.fill();
        }
    }

    // execute frame() every 30 ms
    setInterval(frame, 30);
}());

答案 1 :(得分:2)

Well Techsmith Snagit在AVI中捕获,或者他们的高级应用程序camtasia(生成Flash视频和网页启动器)可以正常工作。为什么不简单地创建要触摸的功能的Powerpoint幻灯片,并使用您想要深入说明的HTML实际演示页面。这是我正在采取的方法。

答案 2 :(得分:1)

到目前为止,我发现迄今为止最不能要求我编写c代码的是使用Titanium for desktop。它具有javascript代码提供的takeScreenshot功能。 takeScreenshot函数获取整个桌面的屏幕截图,但应该很容易自动裁剪。有了大量的javascript动画库,我应该能够破解每一帧的截图,即使它不能实时发生。

虽然我无法使用CSS动画,但这可能是最灵活的解决方案,因为我可以用CSS动画做任何事情,我可以使用javascript,我会有更多的控制权超帧速率等

此外,这应该允许我使用浏览器能够的所有东西,结合html / css / js / svg / canvas。

答案 3 :(得分:1)

我认为最好的方法是从画布的数据创建图像,然后通过模块(例如requestAnimationFrame()将所有这些图像编译成视频,这是节点js包)。这很简单但要小心FPS(帧速率),如果你尽可能快地创建这些图像可能会改变视频的fps,例如,如果你递归使用results,你将是在60帧/秒。因此,您应该设置每个1/30秒的时间(例如,如果您想要30fps视频),并从currentTime创建图像直到视频结束,而不是读取html5视频。如果您不仅有一个画布,如果您通过多个画布在视频上应用动画,则可以创建一个新的空画布并在其上绘制所有画布的数据,以便为每个画布仅创建一个图像而不是一个图像。

来自法国的干杯

答案 4 :(得分:0)

我曾经使用过类似于您要求的工具。它基本上使用cutycapt(或任何其他工具将HTML与CSS转换为图像),并根据所需的帧速率进行一系列屏幕截图。

为了实现这一点,动画应该是纯粹的CSS动画,工具通过解析CSS来插入中间框架的CSS属性。

https://github.com/bpsagar/css2video

我不确定该工具是否完整,如果您有兴趣请告诉我。

答案 5 :(得分:0)

我过去通过在线网站完成了。我已经将html5动画上传到网站http://html5animationtogif.com并获得了动画GIF文件。 之后,我将我的gif文件上传到https://cloudconvert.com/gif-to-mp4并获得了MP4文件。 这是我将html5动画转换为MP4的方法。不确定这是最好的方法。但它对我有用。希望这个答案有所帮助。

答案 6 :(得分:0)

Flash可以执行此操作。 HTML5动画是HTML,CSS,JavaScript和图像的组合。通常,JavaScript计时器用于为各个DIV和图像等设置动画。 没有可用的工具可以接受html5输入并直接导出视频。最近,我已经使用该网站https://html5animationtogif.com/将html5转换为mp4和webm。 基于画布的动画的主要问题之一是,它们无法在浏览器中以60fps的速度运行。单个设置超时大约需要20毫秒。而对于60fps,计时器功能应在16毫秒内循环播放。这也取决于动画效果。如果某个效果消耗了CPU,那么计时器功能将无法在20毫秒内完成循环。有时它可能会跳过并在40或60毫秒内完成循环。

希望这会有所帮助。

答案 7 :(得分:-2)