canvas学习——绘制文本

canvas学习——绘制文本

canvas绘制文本的两种方法：

1、 fillText(text, x, y, maxWidth)

绘制带有颜色填充的文本

• text——必填，需要绘制的文本内容；
• x——必填，文本内容在canvas中绘制时起始位置的水平坐标；
• y——必填，文本内容在canvas中绘制时起始位置的垂直坐标；
• maxWidth——选填，设置文本的最大宽度，当文本内容的宽度大于maxWidth时，文本内容会被压缩至宽度为maxWidth；当文本内容宽度小于maxWidth是，文本内容正常显示；

2、 strokeText(text, x, y, maxWidth)

绘制镂空文本，仅字体边框带有颜色

• text——必填，需要绘制的文本内容；
• x——必填，文本内容在canvas中绘制时起始位置的水平坐标；
• y——必填，文本内容在canvas中绘制时起始位置的垂直坐标；
• maxWidth——选填，设置文本的最大宽度，当文本内容的宽度大于maxWidth时，文本内容会被压缩至宽度为maxWidth；当文本内容宽度小于maxWidth是，文本内容正常显示；

canvas中绘制文本样式设置：

let canvas = document.querySelector('.canvas'),
    ctx = canvas.getContext('2d');

1、字体颜色设置：

• 填充文本颜色设置：ctx.fillStyle = 'color'；color可以是颜色的英文名称或16进制；
• 镂空文本颜色设置：ctx.strokeStyle = 'color'；color可以是颜色的英文名称或16进制；

2、字体大小、类型设置：

• 通过ctx的font属性设置字体的大小和类型：ctx.font = 'font-size font-family'；font-size为字体大小，如：32px；font-family为字体类型，如：Mircrosoft YaHei；

3、文本的对齐方式：

• 通过ctx的textAlign属性设置文本的水平对齐方式：ctx.textAlign = 'start(默认) || left || center || right || end'；start、left、center、right、end为textAlign的取值，默认是start。其中，start和left效果一样，将文本内容左对齐于文本绘制的起始位置；center将文本内容在文本绘制的起始位置两侧各占一半；end和right效果一样，将文本内容右对齐于文本绘制的起始位置；（文本绘制的起始位置指的是fillText或strokeText中的x位置）

• 文本在垂直方向上的位置由fillText或strokeText中的y来控制；