用css3来实现文字特效的渐变效果看网上有几种实现方法，本文先讲使用canvas来实现文字特效，canvas有专门文本属性和方法。

属性描述font设置或返回文本内容的当前字体属性textAlign设置或返回文本内容的当前对齐方式textBaseline设置或返回在绘制文本时使用的当前文本基线方法描述fillText在画布上绘制“被填充的”文本strokeText在画布上绘制文本（无填充）measureText返回包含指定文本宽度的对象

font属性

font 属性设置或返回画布上文本内容的当前字体属性。

font 属性使用的语法与 CSSfont 属性相同。

默认值：10px sans-serifjavascript语法：context.font="italic small-caps bold 12px arial";

textAlign属性

textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。

通常，文本会从指定位置开始，不过，如果您设置为 textAlign="right" 并将文本放置到位置 150，那么会在位置 150 结束。

提示：使用 fillText 或 strokeText 方法在实际地在画布上绘制并定位文本。

默认值：startJavaScript 语法：context.textAlign="center|end|left|right|start";

textBaseline属性

textBaseline 属性设置或返回在绘制文本时的当前文本基线。

下面的图示演示了 textBaseline 属性支持的各种基线：

注释：fillText 或 strokeText 方法在画布上定位文本时，将使用指定的 textBaseline 值。

默认值：alphabeticJavaScript 语法：context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

fillText方法

fillText 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

提示：请使用 font 属性来定义字体和字号，并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。

JavaScript 语法：

context.fillText(text,x,y,maxWidth);

参数值

参数描述text规定在画布上输出的文本。x开始绘制文本的 x 坐标位置（相对于画布）。y开始绘制文本的 y 坐标位置（相对于画布）。maxWidth可选。允许的最大文本宽度，以像素计。

strokeText方法

strokeText 方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

提示：请使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。

JavaScript 语法：

context.strokeText(text,x,y,maxWidth);

measureText方法

measureText 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。

提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。

JavaScript 语法：

context.measureText(text).width;

参数值

代码实例：

代码：

此处内容需要登录才可见

另外还可以设置文字透明度：globalAlpha，画布的阴影：shadowColor、shadowOffsetX、shadowOffsetY等