要在canvas画布上作画，得先有笔。canvas画布提供两种画笔，2d和3d的，这两种笔一眼能瞧出它们的区别。3d笔太昂贵，咱老百姓消费不起，但有一个封装叫 three.js 可以启用3d绘画功能，并有OpenGL和WebGL加持，传说那个头叫轻量级，我瞅了瞅，1.7MB 大小，我勒了个去，这叫肥胖型苗条好不好！嗯，我们只用2d画笔，原生而且天生免费，比九块九包邮的更具魅力。

启用2d画笔，我们需要声明一下，用一个变量代表2d画笔，以后所有的画笔设置、绘制图形等操作都通过这支笔来完成。上一讲，我们的空白canvas画布有个id，id="canv"，我们通过这个id就能轻松拿到2d画笔，一分钱也不用花费：

有了画笔，即使是一头大象，也可以开始作画了。不过大象主要用它自己的象鼻做画笔，只有在需要精致修饰处才用画笔，它的象鼻画笔也许是3d的，反正它可以恣意妄为，作品全都是抽象派风格的，最终作品可能连它自己都看不懂（不过据说它的老师能看得懂）。我们不，我们用性价比高到不能再高的2d画笔，按我们的构想和canvas相关语法规则去绘制现实主义作品，一切条缕清晰并富含思想。现在我们要绘制一个矩形，将来稍加改造说不准它可能就是我们美丽的时钟的指针：

效果如下。代码已有解释，随后我会更详细介绍一些要点：

第5行代码，fillStyle 是画笔的填充样式，用颜色赋值，可以是关键字（如 red）、十六进制（如 #333）、rgb、rgba、hsl、hsla 等等一切浏览器能够接受的颜色值。因为颜色值为字符串，所以用引号包裹起来。

第6行代码，strokeStyle，定义画笔的描边颜色，规范与上行同，不同的是它是用来描边的。

第7行代码，lineWidth，顾名思义，是线条的厚（宽）度，缺省且不进行填充时默认为2的效果，通常可根据需要对它进行设置。这个值会受到填充行为的影响，如果对矩形使用 fillRect 进行了填充，所设置的厚度会被挤占——实际上是被覆盖，上述代码其实是在相同的位置绘制了两个矩形，第一次用描边方式绘制，第二次用填充方式绘制，。

第8行代码，strokeRect 是绘制描边矩形指令，使用 strokeStyle 定义的描边色，缺省时默认黑色，需要四个参数，strokeRect(x,y,w,h); ：

① x : 水平方向起始坐标值（所画矩形的左边缘，相当于HTML元素的left）；
② y : 垂直方向起始坐标值（所画矩形的上边，相当于HTML元素的上边）；
③ w : 矩形宽度（width的缩写）；
④ h : 矩形高度（height的缩写）

代码第9行，fillRect，绘制填充矩形，使用 fillStyle 定义的填充色，默认黑色，所需参数和 strokeRect 一样。

这些属性设定、图形绘制指令（方法），都很容易理解，前提是有一定的英文基础，没有的话查一下词典然后强记下来，同时特别需要注意写法，属性和指令的组合词里，第二个单词的头一个字母必须大写。

至此我们已经成功绘制了一个有描边色和填充色的矩形，但是，时钟的指针应该始于画布的正中央吧？这好办，绘制矩形 strokeRect（x,y,w,h); 时，我们把 x/y 的值都改一改，x 先为 150，y 为150-矩形高度的一半以确保垂直居中，代码为 ctx.strokeRect(150, 140, 100, 20);，矩形的位置不就合适了吗？请看：

不过，上面画布中的矩形现在看上去一点也不像是指针，没关系，它们会变得像指针的，只是现在还不是时候，还有一些重要的问题要处理，处理好后它们就是百分百的时钟指针。