CAKE是一个强大的JavaScript库，它允许开发者通过组合多个单独的元素来构建画布，而不是直接操作像素。本文将展示如何使用这个库来创建一个示例应用程序。
CAKE允许开发者构建一个画布元素，而不是直接操作像素。接下来，将查看一个示例应用程序，演示这种效果。
首先，需要一个HTML文件来托管应用程序。如所见，HTML非常基础。除了两个JavaScript源文件（cake.js是CAKE库的源代码，cake-demo.js是自己的JavaScript文件）和一个简单的样式标签来去除边距，这个HTML是显示页面所需的最低限度。
<span>CAKE<a href="https://bigblog123.com/aa/15203762.php" target="_blank">编程</a>教程</span>
接下来，将在cake-demo.js脚本中进行实际的工作。首先创建一个函数，并将其分配给窗口的onload事件。
首先创建一个函数，并将其分配给窗口的onload事件。
window.onload = function() {
// ...
};
然后创建一个Canvas对象。虽然这确实在HTML页面中创建了一个画布元素，但Canvas对象实际上是CAKE库的一部分。在这里指定了父元素（document.body）和尺寸（600 x 400）。
var CAKECanvas = new Canvas(document.body, 600, 400);
接下来创建一个Circle。第一个参数是圆的大小。第二个参数是通过字面量表示法创建的对象。字面量表示法是JavaScript的一个特性，允许在定义对象时内联定义并初始化属性，例如 {parameter_a: "a", parameter_b: 100}。这是JavaScript缺乏函数重载或可选参数的便捷方式。由于这个对象的属性被标记，它们也是自文档化的。
var circle1 = new Circle(100, {
id: 'myCircle1',
x: CAKECanvas.width / 3,
y: CAKECanvas.height / 2,
stroke: 'cyan',
strokeWidth: 20,
endAngle: Math.PI * 2
});
为Circle添加一个函数，以便每帧调用。t参数是应用程序运行的总时间（以毫秒为单位），而dt参数是自上一帧以来的毫秒数。在这里使用总时间来修改圆的缩放，使其沿正弦波变化。
circle1.addFrameListener(function(t, dt) {
this.scale = Math.sin(t / 1000);
});
然后将Circle作为Canvas的子元素添加。
CAKECanvas.append(circle1);
整个过程然后与第二个圆重复。
var circle2 = new Circle(100, {
id: 'myCircle2',
x: CAKECanvas.width / 3 * 2,
y: CAKECanvas.height / 2,
stroke: 'red',
strokeWidth: 20,
endAngle: Math.PI * 2
});
circle2.addFrameListener(function(t, dt) {
this.scale = Math.cos(t / 1000);
});
CAKECanvas.append(circle2);
接下来创建一个ElementNode。与Circle直接渲染到画布（意味着不会在页面DOM中看到一个圆）不同，ElementNode用于创建一个标准的HTML元素。从开发者的角度来看，ElementNode的创建和修改就像添加到Canvas的任何其他对象一样，但由于它被渲染为HTML元素，因此最终用户可以以标准方式与之交互（例如选择和复制文本）。第一个参数是一个E对象，这是定义元素类型及其内容的简写方式。第二个参数是一个使用字面量表示法创建的对象，就像Circle一样：
var hello = new ElementNode(E('h2', 'Hello, world!'), {
fontFamily: 'Arial, Sans-serif',
noScaling: true,
color: 'black',
x: CAKECanvas.width / 2,
y: CAKECanvas.height / 2,
align: 'center',
valign: 'center'
});
使用every函数设置一个函数，使其每秒钟（或1000毫秒）运行一次。这允许代码定期运行。在这种情况下，将文本颜色设置为magenta。
hello.every(1000, function() {
this.color = 'magenta';
// ...
}, true);
在调用every函数定义的函数的每次调用中，还设置了一个函数，在200毫秒后使用after函数运行。与every函数不同，分配给after函数的代码只运行一次（尽管在分配给every函数的代码内部分配代码给after函数确实意味着，在这段代码中，它将每秒运行一次）。在这种情况下，将文本颜色设置回蓝色。
this.after(200, function() {
this.color = 'blue';
});
最后，将ElementNode添加到Canvas。
CAKECanvas.append(hello);
最终结果是创建了一个动画网页，类似于期望使用Flash或Silverlight创建的效果。页面本身是用画布和H2元素渲染的，但这对于开发者来说大多是透明的，他们可以将页面想象成场景图。