HTML5教程:5.8 canvas绘制文字_H5之家 - 中国HTML5教程资源分享第一站

在HTML 5中，可以在Canvas画布中进行文字的绘制，同时也可以指定绘制文字的字体、大小、对齐方式等，还可以进行文字的纹理填充等。

绘制文字时可以使用fillText方法或strokeText方法。

fillText方法用填充方式绘制字符串，该方法的定义如下所示。

void fillText(text, x, y, [maxWidth]);

该方法接受四个参数，第一个参数text表示要绘制的文字，第二个参数x表示绘制文字的起点横坐标，第三个参数y表示绘制文字的起点纵坐标，第四个参数maxWidth为可选参数，表示显示文字时的最大宽度，可以防止文字溢出。

strokeText方法用轮廓方式绘制字符串，该方法的定义如下所示。

void stroke Text(text, x, y, [maxWidth]);

该方法参数部分的解释与fillText方法相同。

在使用Canvas API来进行文字的绘制之前，可以先对该对象的有关文字绘制的属性进行设置，它们是：

★ font属性：设置文字字体。

★ textAlign属性：设置文字水平对齐方式，属性值可以为start、end、left、right、center。默认值为start。

★ textBaseline属性：设置文字垂直对齐方式，属性值可以为top、hanging、middle、alphabetic、ideographic、bottom。默认值为alphabetic。

下面在示例1中具体给出绘制文字的一个示例。

示例1：

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

var context=canvas.getContext('2d');

context.fillStyle= '#00f';

context.font= 'italic 30px sans-serif';

context.textBaseline = 'top';

//填充字符串

context.fillText ('示例文字', 0, 0);

context.font='bold 30px sans-serif';

//轮廓字符串

context.strokeText('示例文字', 0, 50);

}

复制代码

运行结果如图1所示。

图1 文字绘制示例

在使用CSS样式的时候，有时我们会希望能在文字周围制作一个漂亮的边框，在定义边框宽度的时候，我们需要首先计算出在这个边框里最长一行的文字的宽度。这时，我们可以使用图形上下文对象的measureText方法来得到文字的宽度，该方法的定义如下所示。

metrics = context.measureText(text);

measureText方法接受一个参数text，该参数为需要绘制的文字，该方法返回一个TextMetrics对象，TextMetrics对象的width属性表示使用当前指定的字体后text参数中指定的文字的总文字宽度。

measureText的使用方法如示例2所示。

示例2：

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

var context = canvas.getContext('2d');

context.font = 'italic 20px sans-serif';

/* 定义绘制文字*/

var txt = "字符串的宽度为";

/* 获取文字宽度 */

var tm1 = context.measureText(txt);

/* 绘制文字 */

context.fillText(txt, 10, 30);

context.fillText(tm1.width, tm1.width+10, 30);

/* 改变字体 */

context.font = "bold 30px sans-serif";

/* 重新获取文字宽度 */

var tm2 = context.measureText(txt);

/* 重新绘制文字*/

context.fillText(txt, 10, 70);

context.fillText(tm2.width,tm2.width+10, 70);

}

复制代码

运行结果如图2所示。

图2 测量文字宽度示例

原文链接：