CAKE 编程教程 - 入门

MatthewCasperson

5.00/5 (5投票s)

2009年8月25日

CPOL

3分钟阅读

67307

对 JavaScript CAKE 库的介绍性了解，它允许您像矢量图像一样构建 HTML5 canvas 元素。

引言

CAKE 是一个 JavaScript 库，它允许您将 HTML5 canvas 元素用作场景图，就像 SVG 或其他矢量图像一样。本文将向您展示如何开始使用这个强大的库。

背景

本文是 CAKE 编程教程系列的一部分。

Using the Code

CAKE 允许开发人员从许多单独的元素构建 canvas 元素，而不是直接处理像素。现在我们将看一个示例应用程序来演示这种效果。

cake.html

<html>
	<head>
		<script type="text/javascript" src="../cake.js"></script>
		<script type="text/javascript" src="cake-demo.js"></script>
		<title>CAKE Programming Tutorial</title>
	</head>
	<body style="margin: 0">
	</body>
</html>

首先，我们需要一个 HTML 文件来托管应用程序。正如你所看到的，HTML 非常基本。除了两个 JavaScript 源文件 (cake.js 是 CAKE 库源，cake-demo.js 是我们自己的 JavaScript 文件) 和一个简单的样式标签来删除页边距外，此 HTML 是显示页面所需的最基本内容。

cake-demo.js

window.onload = function() 
{
	var CAKECanvas = new Canvas(document.body, 600, 400);
	
	var circle1 = new Circle(100, 
		{
			id: 'myCircle1',
			x: CAKECanvas.width / 3,  
			y: CAKECanvas.height / 2, 
			stroke: 'cyan', 
			strokeWidth: 20,
			endAngle: Math.PI*2
		}
	);
	
	circle1.addFrameListener(
		function(t, dt) 
		{
			this.scale = Math.sin(t / 1000);
		}
	);
	
	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);
	
	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'
		}
	);
	
	hello.every(1000, 
		function() 
		{
			this.color = 'magenta';
			this.after(200, 
				function() 
				{
					this.color = 'blue';
				}
			);
		},
		true
	);
					
	CAKECanvas.append(hello);
};

真正的工作是在 cake-demo.js 脚本中完成的。首先，创建一个函数并将其分配给窗口的 onload 事件。

window.onload = function() 
{
   ...
}

创建一个 Canvas 对象。虽然这确实在 HTML 页面中创建了一个 canvas 元素，但 Canvas 对象实际上是 CAKE 库的一部分。这里我们指定父元素 (page.body) 和尺寸 (600 x 400)。

var CAKECanvas = new Canvas(document.body, 600, 400);

然后创建一个 Circle。第一个参数是圆的大小。第二个参数是一个通过文字符号创建的对象。文字符号是 JavaScript 的一个特性，其中对象的属性可以内联定义和初始化，如 {paramapter_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 将直接渲染到 canvas（这意味着您不会在页面 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 函数的调用中定义的函数时，我们还设置一个函数在使用 after 函数 200 毫秒后运行。与 every 函数不同，分配给 after 函数的代码运行一次（虽然将代码分配给 every 函数内部的代码中的 after 函数确实意味着，在此代码中，它将每秒运行一次）。在这种情况下，我们将文本颜色设置回 blue。

this.after(200, 
	function() 
	{
		this.color = 'blue';
	}
);

最后，将 ElementNode 附加到 Canvas。

CAKECanvas.append(hello);

最终结果是一个动画网页，与您希望使用 Flash 或 Silverlight 创建的网页非常相似。页面本身已使用 canvas 和 H2 元素进行渲染，但这对于开发人员来说基本上是透明的，他们可以从场景图的角度来考虑页面。

在此处查看实时演示这里，并在此处下载源代码这里。

历史

2009 年 8 月 25 日 - 首次发布