canvas绘制文本

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

font：表示文本样式、大小及字体（context.font = font-style/font-variant/font-weight/font-size/font-family）；

1、font-style：normal(默认)
              italic(斜体字);一套字体会为它的斜体设计一套专门的字形。
               oblique(倾斜字体);一般的字体旋转角度倾斜
 例：context.font = 'italic bold 20px sans-serif';
2、font-variant：normal(默认)
                small-caps;小写英文字母会变为小型大写英文字母，字体大小是小号的
 例： context.font = 'small-caps bold 20px sans-serif';
3、font-weight：lighter(更细);浏览器显示与normal一致
               normal(默认);
               bold(粗体);
               bolder(更粗);浏览器显示与bold一致
4、font-size：20px(默认)
             2em;
             150%;
5、font-family：sans-serif(默认)
               支持@font-fact

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

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

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

（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);

 

转载于:https://www.cnblogs.com/cornlin/p/7622945.html