之前介绍绘制的文章中，在绘制路径和填充路径时只用到了默认的颜色（黑色）。​

如果想要给图形上色，有两个重要的属性可以做到。

// 设置或返回用于填充绘画的颜色、渐变或模式。
// color:指示绘图填充色的 CSS 颜色值。默认值是 #000000。
// gradient:用于填充绘图的渐变对象（线性或放射性）
// pattern:用于填充绘图的 pattern 对象
context.fillStyle=color|gradient|pattern;

// 设置或返回用于笔触的颜色、渐变或模式。
// color:指示绘图填充色的 CSS 颜色值。默认值是 #000000。
// gradient:用于填充绘图的渐变对象（线性或放射性）
// pattern:用于填充绘图的 pattern 对象
context.strokeStyle=color|gradient|pattern;

// 以 color 作为填充有多种形式：

// 1. 使用颜色字符串填充
context.fillStyle = "red";

// 2. 使用十六进制数字字符串填充
context.fillStyle = "#FF0000";

// 3. 使用十六进制数字字符串简写形式填充
context.fillStyle = "#F00";

// 4. 使用 RGB 色彩模式设置颜色
context.fillStyle = "rgb(255,0,0)";

// 5. 使用 RGBA 色彩模式设置颜色，它是在 RGB 色彩模式的基础上多了控制 alpha 透明度的参数，取值范围在 1（不透明）~ 0（透明）之间。
context.fillStyle = "rgba(255,0,0,1)";

// 6. 使用 HSL 色彩模式设置颜色，它是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。 HSL 即是代表色相（H），饱和度（S），明度（L）三个通道的颜色。
context.fillStyle = "hsl(0,100%,50%)";

// 7. 使用 HSLA 色彩模式设置颜色，它是在 HSL 色彩模式的基础上多了控制 alpha 透明度的参数，取值范围在 1（不透明）~ 0（透明）之间。
context.fillStyle = "hsla(0,100%,50%,1)";

HTML5 Canvas 提供了两种方法来渲染文本 。

相关方法：

// 在指定的(x,y)位置填充指定的文本
// text:规定在画布上输出的文本。
// x:开始绘制文本的 x 坐标位置（相对于画布）。
// y:开始绘制文本的 y 坐标位置（相对于画布）。
// maxWidth:可选。允许的最大文本宽度，以像素计。
context.fillText(text, x, y, maxWidth);

// 在指定的(x,y)位置绘制文本边框
// text:规定在画布上输出的文本。
// x:开始绘制文本的 x 坐标位置（相对于画布）。
// y:开始绘制文本的 y 坐标位置（相对于画布）。
// maxWidth:可选。允许的最大文本宽度，以像素计。
context.strokeText(text, x, y, maxWidth);

上一篇文章说矩形是 HTML5 Canvas 提供的唯一原生图形绘制方法，这种说法不完全对，因为 Google 浏览器提供了绘制椭圆形的方法。

绘制椭圆形

绘制方法：

// 绘制椭圆形
// x:椭圆圆心的 x 轴坐标。
// y:椭圆圆心的 y 轴坐标。
// radiusX:椭圆长轴的半径。
// radiusY:椭圆短轴的半径。
// rotation:椭圆的旋转角度，以弧度表示(非角度度数)。
// startAngle:将要绘制的起始点角度，从 x 轴测量，以弧度表示(非角度度数)。
// endAngle:椭圆将要绘制的结束点角度，以弧度表示(非角度度数)。
// anticlockwise:可选，如果为 true，逆时针方向绘制椭圆 （逆时针）， 反之顺时针方向绘制。
context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

所有的图形都需要通过路径绘制，而 HTML5 Canvas 支持一种原生的图形绘制 — 矩形，并且只支持这一种。

关于绘制矩形的方法：

// 创建矩形
// x:矩形左上角的 x 坐标
// y:矩形左上角的 y 坐标
// width:矩形的宽度，以像素计
// height:矩形的高度，以像素计
context.rect(x, y, width, height)

// 绘制一个已填充的矩形
// x:矩形左上角的 x 坐标
// y:矩形左上角的 y 坐标
// width:矩形的宽度，以像素计
// height:矩形的高度，以像素计
context.fillRect(x, y, width, height)

// 绘制一个矩形的边框
// x:矩形左上角的 x 坐标
// y:矩形左上角的 y 坐标
// width:矩形的宽度，以像素计
// height:矩形的高度，以像素计
context.strokeRect(x, y, width, height)

// 清除指定的矩形区域，然后这块区域会变的完全透明。
// x:矩形左上角的 x 坐标
// y:矩形左上角的 y 坐标
// width:矩形的宽度，以像素计
// height:矩形的高度，以像素计
context.clearRect(x, y, width, height);

关于图形的理解

一条或者多条路径相交产生闭环时就会形成一个图形。所以，图形的基础元素是路径，而在 canvas 中画出图形就是将路径闭合，然后通过描边或填充路径区域来渲染图形。

闭合路径

闭合方法：

// 创建从当前点到开始点的路径
context.closePath();

闭合路径就是创建当前路径中的结束点与开始点的路径。使用路径中的一个例子来做闭合测试...