textBaseline 的默认值是 alphabetic ，该值用于绘制由基于拉丁字母的语言所组成的字符串， ideographic 值则用于绘制日文或中文字符串， hanging 值用于绘制各种印度语字符串， top 、 bottom 和 middle 这三个值与特定的语言不相关，它们代表文本周围的边界框之内的某个位置，这个边界框也叫做“字符方框”。

同样来看一个示例，用效果来帮助我们理解 textBaseline 各个值的效果。

var text = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']; ctx.fillStyle = '#f36'; ctx.font = '24px Airal'; for (var i = 0; i < text.length; i++) { ctx.textBaseline = text[i]; ctx.fillText(text[i], (i + 1) * 150, h / 2); }

效果如下：

可以 点击这里 在CodePen上查看Demo效果 。

文本度量

只要你做的事情与文本有关，你就得设法获取某个字符串的像素宽度和高度。在Canvas中提供了 measureText() 方法，这个方法返回一个 TextMetrics 对象，这个对象中包含了一个名为 width 的属性，这个属性就是字符串的宽度。

var text = ctx.measureText("foo"); // TextMetrics object text.width; // 16;

在使用 measureText() 方法时，常见的错误就是在调用完该方法之后，才去设置字型。请注意： measureText() 方法是根据当前的字型来计算字符串宽度的，因此，如果你在调用 measureText() 方法之后才去改变字型，那么该方法所返回的宽度并不能反映出以那种字型来度量的实际文本宽度。

上述的内容就是有关于Canvas中绘制文本所涉及到的一些方法和属性。接下来我们来看两个简单的示例。

示例

前面的示例，我们看到的是通过 fillText() 或 strokeText() 方法绘制填充文本或描边文本，可以说是最简单的绘制文本效果，但实际当中，我们要的效果不仅仅是这些普通的效果。比如我们需要一个圆形的文本效果，3D的文本效果等。那咱们就借助以前所学的一些基础知识来实现这两种效果。

环形文本

直接上代码，这里封装了一个简单的函数，比如 drawCircleText() ，并且根据绘制弧形文本所需要的参数传给这个函数，具体代码如下：

// @param {Object} ctx - CanvasRenderingContext2D // @param {String} text - 需要绘制制的文本 // @param {Number} x - 绘制文本起始点x轴坐标点 // @param {Number} y - 绘制文本起始点y轴坐标点 // @param {Number} radius - 圆形半径, 弧度值 // @param {Number} startAngle - 开始的角度值 // @param {Boolean} isFill - 是否填充，true填充，false描边 // @param {String} color - 文本颜色 function drawCircleText(ctx, text, x, y, radius, startAngle, isFill, color) { // 将startAngle角度转换成弧度 var startRad = Math.PI * startAngle / 180; // 所绘文本的长度 var len = text.length; // 每个字符所对应的弧度 var numRadsPerLetter = Math.PI * 2 / len; ctx.save(); // 将坐标原点移到(x, y) ctx.translate(x, y); // 将坐标旋转startRad ctx.rotate(startRad); // 对字符做操作 for (var i = 0; i < len; i++) { ctx.save(); // 每个字符旋转 ctx.rotate(i * numRadsPerLetter); // isFill为true填充, false为描边 if (isFill) { ctx.fillStyle = color; ctx.fillText(text[i], 0, -radius); } else { ctx.strokeStyle = color; ctx.strokeText(text[i], 0, -radius); } ctx.restore(); } ctx.restore(); }

在使用的时候，只需要调用这个函数，并传入相应的值：

ctx.font = 'bold 40px Arial'; drawCircleText(ctx, 'W3CPLUC.COM!', w / 2, h / 2, 100, 0, true, 'orange');

效果如下：

3D文本效果

3D文本效果在CSS中通过 text-shadow 来实现，具体怎么实现这里就不多说了，必竟我们这里是聊Canvas。其实在Canvas中实现的原理也有点类似，将会使用到 shadowBluer 、 shadowColor 等阴影属性（这个我们前面没有接触过，但后面我们也会深入学习），和前面的圆形文本一样，同样将绘制3D文本的效果封装成一个简单的函数，比如 draw3DText() ，具体的代码如下：

// @param {Object} ctx - CanvasRenderingContext2D // @param {String} text - 绘制的文本内容 // @param {Number} x - 文本起始点x轴坐标 // @param {Number} y - 文本起始点y轴坐标 // @param {Number} textDepth - 阴影的深度 // @param {Boolean} isFill - 文本是否填充，true为填充，false为描边 // @param {String} color - 文本颜色 // @param {String} shadowColor - 阴影颜色 // @param {Number} shadowBlur - 阴影距离 // @param {Number} interval - 间距 function draw3DText(ctx, text, x, y, textDepth,isFill, color, shadowColor, shadowBlur, interval) { var i; for (i = 0; i < textDepth; i++) { if(isFill) { ctx.fillText(text, x - i, y - i); } else { ctx.strokeText(text, x - i, y - i); } } ctx.shadowColor = shadowColor; ctx.shadowBlur = shadowBlur; ctx.shadowOffsetX = textDepth + interval; ctx.shadowOffsetY = textDepth + interval; if (isFill) { ctx.fillStyle = color; ctx.fillText(text, x - i, y - i); } else { ctx.strokeStyle = color; ctx.strokeText(text, x - i, y - i); } }