在Canvas中，文本操作的常用方法有:
在Canvas中，文本操作的常见属性有:
方法说明font定义文本字体样式textAlign定义文本水平对齐方式textBaseline定义文本垂直对齐方式fillStyle定义实心文本颜色stokeStyle定义空心文本颜色strokeText()方法在Canvas中，我们使用strokeText()绘制空心形文本。
语法:
ctx.strokeText(text, x, y, maxWidth);描述:
参数描述:
参数text表示想要绘制的文本字符串；参数x表示文本的横坐标；参数y表示文本的纵坐标，是文本最下边的坐标；参数maxWidth为可选参数，表示文本的最大宽度（单位为像素）。如果文本长度超出maxWidth的值，会将文本压缩至maxWidth。示例：strokeText()方法示例示例源代码:
lt;!DOCTYPE htmlgt;lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8" /gt; lt;titlegt;strokeText()方法示例lt;/titlegt; lt;/headgt; lt;bodygt; lt;canvas id="canvas" width="400" height="200" style="border: 1px dashed #333333" gt;lt;/canvasgt; lt;scriptgt; window.onload = function () { // 1、获取 Canvas 对象 var canvas = document.getElementById("canvas"); // 2、获取上下文环境对象 var ctx = canvas.getContext("2d"); // 3、开始绘制图形 var text = "嗨皮汪小成"; ctx.font = "bold 30px 微软雅黑"; ctx.strokeStyle = "red"; ctx.strokeText(text, 50, 50); }; lt;/scriptgt; lt;/bodygt;lt;/htmlgt;渲染:
fillText()方法在Canvas中，我们使用fillText()方法来绘制实心文本。
语法:
ctx.fillText(text, x, y, maxWidth);描述:
参数描述:
参数text表示想要绘制的文本字符串；参数x表示文本的横坐标；参数y表示文本的纵坐标，是文本最下边的坐标；参数maxWidth为可选参数，表示文本的最大宽度（单位为像素）。如果文本长度超出maxWidth的值，会将文本压缩至maxWidth。示例：fillText()方法示例示例源代码:
lt;!DOCTYPE htmlgt;lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8" /gt; lt;titlegt;fillText方法示例lt;/titlegt; lt;/headgt; lt;bodygt; lt;canvas id="canvas" width="400" height="200" style="border: 1px dashed #333333" gt;lt;/canvasgt; lt;scriptgt; window.onload = function () { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var text = "嗨皮汪小成"; ctx.font = "bold 30px 微软雅黑"; ctx.fillStyle = "red"; ctx.fillText(text, 50, 50); }; lt;/scriptgt; lt;/bodygt;lt;/htmlgt;渲染:
measureText()方法在Canvas中，我们可以使用measureText()方法来获取文本的长度。measureText()方法返回一个只有一个width属性的对象，width属性的值是文本的长度。
语法:
var length = ctx.measureText(text).width;描述:
参数text表示一个字符串，measureText()方法返回的对象的width属性就是这个字符串的长度。
示例：使用measureText()方法使文本水平居中示例源代码:
lt;!DOCTYPE htmlgt;lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8" /gt; lt;titlegt;使用measureText()方法使文本水平居中lt;/titlegt; lt;/headgt; lt;bodygt; lt;canvas id="canvas" width="400" height="200" style="border: 1px dashed #333333" gt;lt;/canvasgt; lt;scriptgt; window.onload = function () { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var text = '嗨皮汪小成@掘金'; ctx.font = '20px bold'; var textWidth = ctx.measureText(text).width; var xPosition = size / 2 - textWidth / 2; ctx.fillStyle = 'red'; ctx.fillText(text, xPosition, 80); }; lt;/scriptgt; lt;/bodygt;lt;/htmlgt;渲染:
font属性在Canvas中，我们使用font属性来定义文本的字体样式。context.font的用法与CSS中font属性的用法相同。
语法:
ctx.font = "font-style font-weight font-size/line-height font-family"描述:
font属性的默认值是10px sans-serif。在定义了font属性之后，下面的文本将继续使用这些font属性值，直到font属性被重新定义为其他属性值。
因为在前面的示例中已经使用了font属性值，所以这里不单独编写示例程序。
textAlign属性在Canvas中，我们使用textAlign属性来定义文本的水平对齐。
语法:
ctx.textAlign = "属性值";描述:
TextAlign属性值如下:
属性值说明start文本在指定的横坐标开始end文本在指定的横坐标结束left文本左对齐right文本右对齐center文本的中心被放置在指定的横坐标处示例：textAlign属性示例示例源代码:
lt;!DOCTYPE htmlgt;lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8" /gt; lt;titlegt;textAlign属性示例lt;/titlegt; lt;/headgt; lt;bodygt; lt;canvas id="canvas" width="400" height="400" style="border: 1px dashed #333333" gt;lt;/canvasgt; lt;scriptgt; window.onload = function () { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 在横坐标150处画一条基准线 ctx.moveTo(150, 0); ctx.lineTo(150, 400); ctx.strokeStyle = 'hotpink'; ctx.stroke(); ctx.font = '12px bold'; ctx.textAlign = 'start'; ctx.fillText('textAlign取值为start', 150, 50); ctx.textAlign = 'end'; ctx.fillText('textAlign取值为end', 150, 100); ctx.textAlign = 'left'; ctx.fillText('textAlign取值为left', 150, 150); ctx.textAlign = 'right'; ctx.fillText('textAlign取值为right', 150, 200); ctx.textAlign = 'center'; ctx.fillText('textAlign取值为center', 150, 250); }; lt;/scriptgt; lt;/bodygt;lt;/htmlgt;渲染:
textBaseline属性在Canvas中，我们使用textBaseline属性来定义文本的垂直对齐。
语法:
ctx.textBaseline = "属性值";描述:
TextBaseline属性值如下:
属性值说明alphabetic文本基线是普通英文字母的基线top文本基线是em方框的顶端middle文本基线是em方框的中心bottom文本基线是em方框的底端示例：textBaseline属性示例示例源代码:
lt;!DOCTYPE htmlgt;lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8" /gt; lt;titlegt;textBaseline属性示例lt;/titlegt; lt;/headgt; lt;bodygt; lt;canvas id="canvas" width="400" height="400" style="border: 1px dashed #333333" gt;lt;/canvasgt; lt;scriptgt; window.onload = function () { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.font = '12px bold'; // 在纵坐标200处画一条基准线 ctx.moveTo(0, 200); ctx.lineTo(400, 200); ctx.strokeStyle = 'hotpink'; ctx.stroke(); ctx.font = '12px bold'; ctx.textBaseline = 'alphabetic'; ctx.fillText('alphabetic', 50, 200); ctx.textBaseline = 'top'; ctx.fillText('top', 130, 200); ctx.textBaseline = 'middle'; ctx.fillText('middle', 210, 200); ctx.textBaseline = 'bottom'; ctx.fillText('bottom', 290, 200); }; lt;/scriptgt; lt;/bodygt;lt;/htmlgt;
