canvas绘制文本

Posted 2020-10-09 corn林

1、绘制文本方法有两个为：fillText()与strokeText();

绘制文本方法自带属性如以下：

font：表示文本样式、大小及字体；

textAlign：表示文本对其方式（‘start‘, ‘end‘, ‘left‘, ‘right‘, ‘center‘）；

textBaseline：表示文本的基线。（‘top‘, ‘hanging‘, ‘middle‘, ‘alphabetic‘, ‘ideographic‘, ‘bottom‘）；

（1）fillText(需要绘制的字符串, x坐标, y坐标, 可选最大像素宽度)；

context.font = ‘50px Microsoft Yahei‘;
context.textAlign = ‘left‘;
context.textBaseline = ‘middle‘;
context.fillStyle = ‘#ff0000‘;
context.fillText(‘123‘, 50, 50, 50);

（2）strokeText(需要绘制的字符串, x坐标, y坐标, 可选最大像素宽度)；

context.font = ‘50px Microsoft Yahei‘;
context.textAlign = ‘left‘;
context.textBaseline = ‘middle‘;
context.strokeStyle = ‘#ff0000‘;
context.strokeText(‘123‘, 200, 50);

2、measureText()；

　　用于辅助确定文本大小的方法，该方法只接收一个参数，即需要绘制的文本。并返回一个TextMetrics对象，该对象有一个width属性。

console.log(context.measureText(‘123‘).width);