12-绘制图元

1.7　绘制图元

HTML5提供了众多的好处，标准的图形化接口就是其一。HTML5 canvas可以画出很多图元，例如，方形、圆形或多边形等基本图形。但是直接使用canvas可能会痛苦，所以会借用一个叫作Paper.js的图形库间接使用canvas。

Paper.js不是唯一可用的图形库：KineticJS，Fabric.js 和 EaselJS 都是当下流行且非常易用的替代品。这些类库作者都用过，它们都是很棒的图形库。

在使用Paper.js画图之前，需要一个可以用来画图的HTML canvas元素。在HTML文件body标签中加入以下代码（可以把这些代码放在任何位置，比如在介绍的段落后面）：

<canvas id="mainCanvas"></canvas>

注意，这里给canvas设置了id属性：这样就方便在JavaScript和CSS中引用它。此时刷新页面不会有任何变化，这是因为还没有在canvas上绘制任何东西，而且这个跟背景色一样的白色canvas连宽高都不存在，从而导致了它很难被区分。

每个HTML元素都可以有一个合法的ID（格式正确），ID必须是唯一的。在上面的代码中创建了一个id为“mainCanvas”的canvas元素，就意味着不能在其他元素上使用这个ID。正因为如此，在编写HTML时不应过多的使用ID。对于初学者来说，一次只考虑一件事情会更简单一些，所以在本例中使用ID，根据定义，一个ID只能引用页面上的一个元素。

继续修改main.css文件，让canvas在页面上显示出来。即使不熟悉CSS也没关系，上述CSS代码只是简单地给元素设定了宽度和高度，并且设置了黑色边框：^[3]

#mainCanvas {
   width: 400px;
   height: 400px;
   border: solid 1px black;
}

刷新页面，应该可以看到canvas了。

现在有了画图的载体，接下来要引入Paper.js帮助绘图。在引入jQuery和main.js的语句之间插入一行：

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.24/
paper-full.min.js"></script>

注意，跟引入jQuery的方式一样，也从CDN上加载Paper.js。

大家可能已经意识到，引入js文件的顺序是很重要的。因为需要在main.js中使用jQuery和Paper.js，所以这两个文件必须在main.js之前被加载。而这两个文件互相之间没有依赖，所以谁先谁后并不重要，作者习惯最先引入jQuery，因为在网页开发中的很多东西都依赖jQuery。

代码中引入了Paper.js后，还需要对它做些配置。任何时候当遇到这样的重复代码--使用某个工具类库前的初始化设置--通常称为样板代码。将以下样板代码加入到main.js中“use strict”后面（如果愿意，可以删除console.log）

paper.install(window);
paper.setup(document.getElementById('mainCanvas'));
// TODO
paper.view.draw();

第一行将Paper.js注册为一个全局变量（第七章中会深入讲）。第二行将Paper.js附在canvas上，同时准备绘图。在中间放置了TODO，将从这里开始编写代码来完成那些有趣的事情。最后一行则使用Paper.js在屏幕上绘画。

所有的样板代码都就绪，就可以开始绘图了！下面要在canvas中间画一个绿色的圆。将“TODO”语句替换成以下代码：

var c = Shape.Circle(200, 200, 50);
c.fillColor = 'green';

刷新浏览器，会看到一个绿色的圆形。到这儿已经编写了第一行真实的JavaScript代码。上面两行代码包含了很多信息，不过现在只需要关注重要的信息。第一行代码通过三个参数创建了一个circle对象，参数分别是圆心的x、y坐标和半径。回忆一下创建canvas的时候给它指定的长和宽都是400pixels，所以canvas中心的坐标是（200，200）。圆形的半径设为50，恰好是canvas的长和宽的1/8。第二行设置了填充颜色，是和外部截然不同的颜色（这种用法在Paper.js中称为stroke）。可以任意改变这些参数看看结果会有什么不同。