Canvas文本

Canvas文本

文本

canvas 中依旧提供了两种方法来渲染文本，一种是描边一种是填充

描边文本

strokeText(text, x, y, maxWidth)

text：绘制的文案
x、y：文本的起始位置
maxWidth：可选参数，最大宽度。需要注意的是当文案大于最大宽度时不是裁剪或者换行，而是缩小字体

ctx.font = '20px console'
ctx.strokeText('canvas好啊', 100, 100, 160)

填充文本
fillText(text, x, y, maxWidth)

text：绘制的文案
x、y：文本的起始位置
maxWidth：可选参数，最大宽度。需要注意的是当文案大于最大宽度时不是裁剪或者换行，而是缩小字体

ctx.font = '20px console'
ctx.fillText('canvas好啊', 100, 100, 160)

文本样式

font
用于绘制文本的样式
默认的字体是 10px sans-serif。

textAlign
文本对齐的方式
可选值为：left、right、center、start和end。默认值是 start。

direction
文本的方向
可选值为：ltr（文本方向从左向右）、rtl（文本方向从右向左）、inherit（根据情况继承 Canvas元素或者 Document 。）。默认值是 inherit。

需要注意的是 direction 属性会对 textAlign 属性产生影响。
如果 direction 属性设置为 ltr，则textAlign属性的 left 和 start 的效果相同，right 和 end 的效果相同。
如果 direction 属性设置为 rtl，则 textAlign属性的 left 和 end 的效果相同，right 和 start 的效果相同。

	ctx.direction = 'rtl'
	ctx.textAlign = 'end' 

textBaseline
基线对齐选项，决定文字垂直方向的对齐方式
可选值为：top、hanging、middle、alphabetic、ideographic和bottom。默认值是 alphabetic。

ctx.textBaseline = 'bottom'

measureText
测量文本，返回一个 TextMetrics对象。

   ctx.fillText('canvas好啊', 400, 100, 200)
   const text = ctx.measureText('canvas好啊')
   console.log(text)

• TextMetrics.width：基于当前上下文字体，计算内联字符串的宽度。
• TextMetrics.actualBoundingBoxLeft：从 textAlign 属性确定的对齐点到文本矩形边界左侧的距离，使用 CSS 像素计算；正值表示文本矩形边界左侧在该对齐点的左侧。
• TextMetrics.actualBoundingBoxRight：从 textAlign 属性确定的对齐点到文本矩形边界右侧的距离。
• TextMetrics.fontBoundingBoxAscent：从 textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离。
• TextMetrics.fontBoundingBoxDescent：从 textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离。
• TextMetrics.actualBoundingBoxAscent：从 textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离。
• TextMetrics.actualBoundingBoxDescent：从 textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离。
• TextMetrics.emHeightAscent：从 textBaseline 属性标明的水平线到线框中 em 方块顶部的距离。
• TextMetrics.emHeightDescent：从 textBaseline 属性标明的水平线到线框中 em 方块底部的距离。
• TextMetrics.hangingBaseline：从 textBaseline 属性标明的水平线到线框的 hanging 基线的距离。
• TextMetrics.alphabeticBaseline：从 textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离。
• TextMetrics.ideographicBaseline：从 textBaseline 属性标明的水平线到线框的 ideographic 基线的距离。

阴影

shadowOffsetX、shadowOffsetY
用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

shadowBlur
用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。

shadowColor
是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

	ctx.shadowOffsetX = 10
	ctx.shadowOffsetY = 10
    ctx.shadowBlur = 5
    ctx.shadowColor = 'pink'
    ctx.fillText('canvas好啊', 400, 100, 200)
    ctx.fillRect(200, 200, 200, 50)