绘制文本
在HTML5中，我们还可以在Canvas「画布」上绘制我们所需的文本文字，其中所涉及到的CanvasRenderingContext2D对象的主要属性和方法如下：
| 属性或方法 | 基本描述 |
|---|---|
| font | 设置绘制文字所使用的字体，例如
，默认值为
。该属性的用法与css font属性一致，例如
|
| fillStyle | 用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个
对象或者
对象 |
| strokeStyle | 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个
对象或者
对象 |
| fillText(string text, int x, int y[, int maxWidth]) | 从指定坐标点位置开始绘制填充的文本文字。参数
是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为
。 |
| strokeText(string text, int x, int y[, int maxWidth]) | 从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数
是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。该方法与
用法一致，不过
绘制的文字内部是非填充(空心)的，
绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为
。 |
从上面的API描述信息中我们可以得知，在Canvas中可以使用两种方式来绘制文本文字：一种是使用fillText()+fillStyle来绘制填充(实心)的文字；一种是使用strokeText()+strokeStyle绘制非填充(空心)的文字。
下面，我们先来看看如何使用canvas绘制实心文字，具体html代码如下：
JavaScript Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
