文本绘制
Canvas 2D API 提供了两种绘制文本的方法和一个检查字体宽度的方法
方法变量说明
变量名 | 类型 | 是否必须 | 说明 |
---|---|---|---|
text | string | 是 | 待填充文字 |
x | Number | 是 | 指定左上角位置的X坐标 |
y | Number | 是 | 指定左上角位置的Y坐标 |
maxWidth | Number | 否 | 绘制的最大宽度,如果文本没有达到最大宽度大小,按正常显示,如果超过了设置的最大宽度,则会压缩文本宽度到设定值 |
填充文本
填充文本 语法
在指定的位置填充文本,可选绘制的最大宽度
即绘制的文本为实心fillText(text, x, y [, maxWidth])
填充文本 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> </head> <body> <canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("imooc"); var ctx=c.getContext("2d"); //没有配置最大宽度 ctx.fillText("Hello IMooc",10,50); </script> </body> </html>
空心文本
绘制空心文本 语法
在指定的(x,y)位置绘制文本边框,可选绘制的最大宽度
即绘制的文本为空心strokeText(text, x, y [, maxWidth])
绘制空心文本 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> </head> <body> <canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("imooc"); var ctx=c.getContext("2d"); //传入最大宽度 ctx.strokeText("Hello IMooc",10,50, 100); </script> </body> </html>
检查文本宽度
检查文本宽度 语法
此方法返回一个被测量文本 TextMetrics 对象
此对象包含了例如 text文字所占宽度width、文本矩形边界右侧距离等多个属性measureText(text) 检查文本宽度 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> </head> <body> <canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c = document.getElementById("imooc"); var ctx = c.getContext("2d"); var txt = "Hello IMooc" // measureText不会渲染canvas,知识返回了一个包含多个属性的对象 var textMetricsObj = ctx.measureText(txt) alert(textMetricsObj.width) </script> </body> </html>
文本样式
Canvas 2D API文本绘制提供了四个设置文本样式的属性,我们一个一个来看
字体设置 .font
字体设置 .font 说明
- .font 是 Canvas 2D API 描述绘制文字时,为当前字体样式设置的属性。
- 使用和 CSS font 规范相同的字符串值。
- 默认值: 10px sans-serif
语法
ctx.font = value;
参数说明
变量名 | 类型 | 是否必须 | 说明 |
---|---|---|---|
value | string | 是 | 符合CSS中font的语法字符串 |
字体设置 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> </head> <body> <canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("imooc"); var ctx=c.getContext("2d"); //设置了字体大小,和字体样式 ctx.font="30px Microsoft YaHei,SimSun,Arial"; ctx.fillText("Hello IMooc",10,50); </script> </body> </html>
对齐设置 .textAlign
对齐设置 .textAlign 说明
- .textAlign 是 Canvas 2D API 提供的设置文本对其方式的属性。
- 默认值: start
特别说明
该对齐方式是针对 .fillText/.strokeText 方法的 X 的值。所以如果 textAlign="center",那么该文本将画在 x-50%*width的位置
语法
ctx.textAlign = value;
value值说明
value可取如下值
value | 说明 | 特别说明 |
---|---|---|
left | 文本左对齐 | 对齐方式是针对 .fillText/.strokeText 方法的 X 的值 |
right | 文本右对齐 | 对齐方式是针对 .fillText/.strokeText 方法的 X 的值 |
center | 文本居中对齐 | 对齐方式是针对 .fillText/.strokeText 方法的 X 的值 |
start | 文本对齐界线开始的地方,默认左对齐 | 搭配direction属性使用,ltr:从左向右,rtl:从右向左 |
end | 文本对齐界线结束的地方,默认右对齐 | 搭配direction属性使用,ltr:从左向右,rtl:从右向左. |
补充
- 如果你想让文本在整个canvas居中,只需要将fillText的x值设置成canvas的宽度的一半,.textAlign值设置成center。
- start和stop默认情况下是等同于left和right的。如果设置direction的值为:rtl,则刚好相反
- direction属性还未被纳入标准文档,兼容性很差, 所以针对start和end的使用参照left和right
对齐设置 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> </head> <body> <canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("imooc"); var ctx=c.getContext("2d"); //X的值为175,在画布正中间 ctx.font="30px Microsoft YaHei,SimSun,Arial"; ctx.textAlign="left" ctx.fillText("Left Imooc",175,50); ctx.textAlign="center" ctx.fillText("Center IMooc",175,100); ctx.textAlign="right" ctx.fillText("Right IMooc",175,150); </script> </body> </html>
垂直对其设置 .textBaseline
垂直对其设置 .textBaseline 说明
- .textBaseline 是 Canvas 2D API 提供的文本垂直对齐的属性(基线对齐属性)。
- 默认值: alphabetic
语法
ctx.textBaseline = value;
value值说明
value可取如下值
value | 说明 | 特别说明 |
---|---|---|
top | 文本基线在文本块的顶部 | |
hanging | 文本基线是悬挂基线 | |
middle | 文本基线在文本块的中间 | |
alphabetic | 文本基线是标准的字母基线。 | |
ideographic | 文字基线是表意字基线 | 如果字符本身超出了alphabetic 基线,那么ideograhpic基线位置在字符本身的底部。 |
bottom | 文本基线在文本块的底部 | 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。 |
补充
- 如果你想让文本在整个canvas居中,只需要将fillText的x值设置成canvas的宽度的一半,.textAlign值设置成center。
- start和stop默认情况下是等同于left和right的。如果设置direction的值为:rtl,则刚好相反
- direction属性还未被纳入标准文档,所以兼容性很差, 不建议使用
字体设置 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> </head> <body> <canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("imooc"); var ctx=c.getContext("2d"); ctx.font="30px Microsoft YaHei,SimSun,Arial"; //设置了不同垂直对齐方式 ctx.textBaseline="top" ctx.fillText("TOPtop",0,50, 100); ctx.textBaseline="hanging" ctx.fillText("HANGING hanging",150,50, 100); ctx.textBaseline="middle" ctx.fillText("MIDDLEmiddle",305,50); </script> </body> </html>
文本方向设置 .direction
文本方向设置 .direction 说明
- .textBaseline 是 Canvas 2D API 提供的文本垂直对齐的属性(基线对齐属性)。
- 默认值: inherit
语法
ctx.textBaseline = value;
value值说明
value可取如下值
|value|说明|特别说明| |---|---|---| | ltr |文本方向从左向右。|left to right 缩写| | rtl |文本方向从右向左。|right to left 缩写| | inherit |根据情况继承 canvas 元素或者 Document| 默认从左向右| 补充
- direction属性还未被纳入标准文档,所以兼容性很差,不建议使用
字体设置 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>慕课网Wiki</title> </head> <body> <canvas id="imooc" width="550" height="200" style="border:1px solid #f2180d;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("imooc"); var ctx=c.getContext("2d"); ctx.font="30px Microsoft YaHei,SimSun,Arial"; //设置了不同垂直对齐方式 ctx.direction = "ltr"; ctx.fillText("Hello IMooc",305,50); </script> </body> </html>