demo_canvas 教程

本教程介绍如何构建并打开浏览器 Canvas 演示，以及它的程序是如何组织的，以便你加以改造。

快速开始

在仓库根目录下：

just canvas-serve

打开 http://localhost:8080。页面显示一个旋转的圆环；在选择框中选择 “Dolly zoom” 可切换到滑动变焦场景。不用 just 时，运行 moon build src/demo_canvas --target js，把 src/demo_canvas/index.html 和 _build/js/debug/build/demo_canvas/demo_canvas.js（重命名为 demo.js）复制到同一目录，并用任意静态文件服务器提供服务；浏览器不会从 file:// 页面加载 JavaScript 模块。

常见任务

阅读程序

src/demo_canvas/main.mbt 分为三部分：

1. 场景函数 torus_scene(timestamp) 和 dolly_scene(frame)，它们为某一时刻构建 @frontend.Scene，以及使用 ScientificCamera 的对应 RenderView 函数。
2. render_frame(context, timestamp, selected)，它选择场景并调用 @canvas.render_scene。
3. main，它查找画布和选择框，把选择保存在一个 Ref 中，并启动一个每帧都渲染的 requestAnimationFrame 循环。

添加场景

在 DemoKind 枚举中添加一个构造器，在 index.html 中添加一个带新值的 <option>，在 demo_kind 中添加把该值映射到它的分支，并在 render_frame 中添加构建其场景和视图的分支。然后用 just canvas-build 重新构建。

修改画布尺寸

常量 WIDTH 和 HEIGHT 同时设置投影的视口和后端配置；修改它们时要一并修改 index.html 中的属性。

进阶

Canvas 教程单独讲解了后端调用，demo 设计推导了与终端演示共用的滑动变焦。

常见陷阱

• 直接打开文件。 请通过 HTTP 提供该目录；模块脚本不会从 file:// 加载。
• 过期的构建。 just canvas-serve 会重新构建；手动启动的服务器只会提供最后复制过去的内容。

下一步

• demo_canvas API 说明了页面约定。
• demo_canvas 设计解释了时间如何映射到场景上。
• 试试 demo_gsap 中的矢量版本。