canvas api 具有强大的文本功能， 操作canvas 文本与操作其他路径对象 的方式相同： 可以描绘文本轮郭，填充文本内部。
context 对象的文本绘制由两个函数实现:
filltext(text, x, y, maxwidth); 填充
stroketext(text, x, y, maxwidth); 描绘轮郭
两个函数的参数： 文本参数， 以及用于指定文本位置的坐标参数， maxwidth 是可选参数, 用于限制字体大小, 将文本字体强制收缩到指定尺寸.
此外还有一个measuretext() 函数， 它会返回一个度量对象， 其中包含了在当前context 环境下指定文本的实际显示宽度
在html5.js 源码定义为:
/**@param {string} text@return {textmetrics}*/canvasrenderingcontext2d.prototype.measuretext = function(text) {};
一个示例
<!doctype html>
<html>
<meta charset="utf-8">
<title>canvas 文本</title>
<canvas id="trails" style="border: 1px solid;" width="400" height="300"> </canvas>
<script>
function drawtrails() {
var canvas = document.getelementbyid('trails');
var context = canvas.getcontext('2d');
// 在canvas 上绘制标题文本
context.save();
// 字号为60px, 字体为impact
context.font = "60px impact";
// 将文本填充为棕色
context.fillstyle = '#996600';
// 将文本设为居中对齐
context.textalign = 'center';
// 在canvas顶部中央的位置
// 以大字体的形式显示文本
context.filltext('happy trails!', 200, 60, 400);
context.restore();
}
window.addeventlistener("load", drawtrails, true);
</script>
</html>
, 将代码中filltext 替换成stroketext(), 效果:
为了保证文本在各浏览器下都能正常显示, canvas api 为context 提供了类似于css 的属性， 以此来保证实际显示效果的高度可配置.
以上就是html5之8 __canvas 文本的内容。