学习Canvas基础-绘制文字

方法

font () 描述绘制文字时，当前字体样式的属性

参数：
ctx.font = value
value:
符合 CSS font 语法的DOMString 字符串。默认字体是 10px sans-serif。

strokeText() 给定的 (x, y) 位置绘制文本的方法

ctx.strokeText(text, x, y [, maxWidth])
参数：
text
使用当前 font，textAlign，textBaseline和direction 的值对文本进行渲染。
x
文本起始点的 x 轴坐标。
y
文本起始点的 y 轴坐标。
maxWidth 可选
需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体。

fillText() 在 (x, y) 位置填充文本的方法

ctx.fillText(text, x, y, [maxWidth])
参数：
text
使用当前的 font, textAlign, textBaseline 和 direction 值对文本进行渲染。
x
文本起点的 x 轴坐标。
y
文本起点的 y 轴坐标。
maxWidth 可选
绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。

textAlign () 描述绘制文本时，文本的对齐方式的属性

ctx.textAlign = "left" || "right" || "center" || "start" || "end"
参数：
left
文本左对齐。
right
文本右对齐。
center
文本居中对齐。
start
文本对齐界线开始的地方（左对齐指本地从左向右，右对齐指本地从右向左）。
end
文本对齐界线结束的地方（左对齐指本地从左向右，右对齐指本地从右向左）。

textBaseline() 描述绘制文本时，当前文本基线的属性。(决定文字垂直方向的对齐方式。)

ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
参数：
top
文本基线在文本块的顶部。
hanging
文本基线是悬挂基线。
middle
文本基线在文本块的中间。
alphabetic
文本基线是标准的字母基线。
ideographic
文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。
bottom
文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
默认值是 alphabetic。

measureText() 方法返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）。

ctx.measureText(text)
参数：
text
需要测量的String 。
返回值：
{
actualBoundingBoxAscent: 9
actualBoundingBoxDescent: 2
actualBoundingBoxLeft: 1
actualBoundingBoxRight: 117.162109375
fontBoundingBoxAscent: 11
fontBoundingBoxDescent: 3
width: 116.162109375
}

 let text = 'Javascript是最优美的语言'// 查看当前文字的宽高let width = ctx.measureText(text)console.log(width);

事例

填充内部样式

 <!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="600px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>/** @type {HTMLCanvasElement} *///  获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')// 添加线性渐变var gradient = ctx.createLinearGradient(0,0,600,400);gradient.addColorStop(0, 'red');gradient.addColorStop(1, 'blue');ctx.fillStyle = gradient;let text = 'Javascript是最优美的语言'// 查看当前文字的宽高let width = ctx.measureText(text)console.log(width);ctx.font = '30px Consolas'// 设置文本的对齐方式的属性left文本左对齐、right文本右对齐、center文本居中对齐、// start（默认）文本对齐界线开始的地方、end文本对齐界线结束的地方ctx.textAlign="center"// 设置文字上下对齐方式top文本基线在文本块的顶部。//hanging文本基线是悬挂基线。//middle文本基线在文本块的中间。//alphabetic文本基线是标准的字母基线。// ideographic文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。// bottom文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。ctx.textBaseline="middle"ctx.fillText(text, 300, 200)//以下是基准点ctx.arc(300,200,3, 0,Math.PI*2)ctx.fillStyle='black'ctx.fill()</script>

字体轮廓样式

 <!-- 兼容性写法，在低版本时标签内部的文字才会显示 --><canvas id="cont" width="600px" height="400px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas><script>/** @type {HTMLCanvasElement} *///  获取canvas画布const canvas = document.querySelector('#cont')// 获取画布的应用上下文const ctx = canvas.getContext('2d')let text = 'Javascript是最优美的语言'// 查看当前文字的宽高let width = ctx.measureText(text)console.log(width);ctx.font = '30px Consolas'// 设置文本的对齐方式的属性left文本左对齐、right文本右对齐、center文本居中对齐、// start（默认）文本对齐界线开始的地方、end文本对齐界线结束的地方ctx.textAlign="center"// 设置文字上下对齐方式top文本基线在文本块的顶部。//hanging文本基线是悬挂基线。//middle文本基线在文本块的中间。//alphabetic文本基线是标准的字母基线。// ideographic文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。// bottom文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。ctx.textBaseline="middle"ctx.strokeText(text, 300, 200)//以下是基准点ctx.arc(300,200,3, 0,Math.PI*2)ctx.fillStyle='black'ctx.fill()</script>