为什么要设立画布？

一个动画引擎的图形表达能力肯定是越强越好。图形表达能力越强，就意味着使用者能够描述越复杂的场景。sd 运行在浏览器中，这就意味着浏览器的绘图能力天生能为 sd 所用，这赋予了 sd 极强的图形表达能力。

然而，在浏览器中提供了 SVGElement，HTMLElement，WebGPU 和 WebGL 等多种表达图形的手段，这些手段在使用的时候多少有些区别。为了弥合这些手段之间的差异性，sd 提供了不同的画布来做相应的绘制。简单来说，画布设立的初衷就是为了尽其所能地利用浏览器的绘图能力的。

在 sd 内部提供了各式各样的可编程节点，这些可编程节点是动画创作的基石。而这些节点背后封装的就是上述各种各样的图形表达能力，使用者需要挑选正确的画布进行绘制。

SVG 画布

这一张画布用来盛放所有的 SVGElement。对 SVG 格式不熟悉的读者可以参考此处：SVG：可缩放矢量图形。SVG 画布是最早开始研发的，同时功能也是最完善的，对应的可编程节点是最多的，例如：sd.Rect、sd.Circle、sd.Ellipse、sd.Path 等等。

在代码层面，可以这样获取 SVG 画布：

const svg = sd.svg();

如果希望将某个节点绘制在 SVG 画布上，可以这样做：

const rect = new sd.Rect(svg);
const circle = new sd.Circle(svg).x(100);

更多的有关可编程节点的初始化的内容留到后续章节，此处不详细展开了。

DIV 画布

这一张画布用来盛放所有的 HTMLElement。DIV 画布通常盛放一些和用户交互有关的可编程节点，例如：sd.Button、sd.Input、sd.Slider 等等。

在代码层面，可以这样获取 DIV 画布：

const div = sd.div();

如果希望将某个节点绘制在 DIV 画布上，可以这样做：

const button = new sd.Button(div);
const input = new sd.Input(div).x(100).width(80);
const slider = new sd.Slider(div).x(200);

THREE 画布

浏览器的 3D 绘制能力总是用 canvas 开启，所以我们可以先新建一张 canvas：

const div = sd.div();
const canvas = new sd.Canvas(div);

然后激活此画布的 3D 绘制能力：

const three = canvas.three();

随后就可以在 THREE 画布上创建各种各样的 3D 的可编程节点了：

const c1 = new sd.Cube(three);
const c2 = new sd.Cube(three).x(1);
const c3 = new sd.Cube(three).y(1);
const c4 = new sd.Cube(three).z(1);
const light = new sd.Light(three);

后记

目前我们所绘制的东西仍然是静态的，在后续章节中我们将尝试让它们动起来。