HTML5 canvas文本渐变特效

文章目录

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

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

font属性

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

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

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

textAlign属性

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

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

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

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

textBaseline属性

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

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

文本基线图示

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

默认值:alphabetic
JavaScript 语法: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);

参数值

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

measureText()方法

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

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

JavaScript 语法:

context.measureText(text).width;

参数值

参数描述
text要测量的文本。

代码实例:

fillText

代码:

此处内容需要登录才可见
HTML5 canvas文本渐变特效

另外还可以设置文字透明度:globalAlpha,画布的阴影:shadowColorshadowOffsetXshadowOffsetY

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原文链接:HTML5 canvas文本渐变特效 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/html5-canvas-text.html)

发表评论

请登录后发表评论: