Animation 使用画布动画的产品演示

我喜欢Sublime文本在其主页上显示其产品演示的方式：

如何创建类似的演示？我只注意到它是一个Canvas元素

---

抱歉，如果这听起来是个基本问题。我看到它是用帆布做的。非常感谢您在这方面提供的任何线索或帮助

他们正在使用延迟和图像的某些部分，例如这一部分（查看图像的底部）：

并指定渲染时每个图像的（矩形）部分，使其看起来像动画

这是一个典型的例子

---

以下是图像列表：

"anim/rename2_packed.png",
"anim/days_169_packed.png",
"anim/command_palette_packed.png",
"anim/goto_anything_packed.png",
"anim/goto_anything2_packed.png",
"anim/regex_packed.png"

---

这就是他们指定延迟和图像片段的方式

{"delay":1811,"blit":[[0,0,800,450,0,0]]},
{"delay":48,"blit":[[0,450,400,344,200,36],[66,982,63,15,0,36]]},
{"delay":798,"blit":[]}, etc...

如您所见，

delay

是以毫秒为单位的时间，

blit

看起来像是

drawImage

-srcX，srcY，width，height，destX，destY的参数

---

每个“屏幕”都作为一个单独的变量保存，如

命令调色板时间线

，

天时间线

，

转到任何东西时间线

，等等。每个屏幕都包含延迟/blit对象数组，如上面段落中的对象

---

实际的渲染代码非常简单，它们遵循每个时间轴中的每个步骤，它们之间有延迟，每个步骤的渲染方式如下：

for (j = 0; j < blits.length; ++j)
    {
        var blit = blits[j]
        var sx = blit[0]
        var sy = blit[1]
        var w = blit[2]
        var h = blit[3]
        var dx = blit[4]
        var dy = blit[5]
        ctx.drawImage(img, sx, sy, w, h, dx, dy, w, h)
    }

for（j=0；j

使用画布完成升华文本上的一个。GIF速度慢，分辨率高的图像会使图像变得大而模糊。你想演示你的应用程序吗？比如一系列分步截图？或者，您只是想创建一个“自动打字机”，将文本一次一个字母地绘制到画布上（就像正在打印一样）？还是别的什么？：-）