canvas绘制多⾏⽂字
fontweight属性bold⼀、canvas绘制⽂字的⽅法和属性
1. fillText(text, x, y [, maxWidth])
text：绘制⽂本；x：⽂本起点的 x 轴坐标；y：⽂本起点的 y 轴坐标；
maxWidth：可选，绘制的最⼤宽度。如果指定了值，计算字符串的值⽐最⼤宽度还要宽，字体为了适应会⽔平缩放。
2. measureText()
将返回⼀个 TextMetrics对象的宽度、所在像素，这些体现⽂本特性的属性。
3.  font
符合CSS font 语法的DOMString 字符串。默认字体是 10px sans-serif
属性：
<font-size><font-family> 必选
<font-style><font-variant><font-weight><font-stretch><line-height> 可选
形如：italic small-caps bold 16px/2 cursive;
line-height必须紧跟font-size，在“/”之前，⽐如:“16px/3”，(注:node-canvas下，⽆效)
4. textAlign
⽂本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start
5. textBaseline
基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
6. direction
⽂本⽅向。值包括：ltr, rtl, inherit。默认值是 inherit；
7. fillStyle
使⽤ fillStyle 属性设置填充颜⾊
f illStyle有三种属性值：color(颜⾊)，gradient(渐变)，pattern(⾮透明对象)
⼆、绘制有⾏⾼和宽度的单⾏⽂字
1. ⾸先绘制⼀个矩形裁切区域
<(x,  y, width, lineHeight);
ctx.clip();
2. 绘制⽂字
ctx.fillText(text, x, y + lineHeight / 2);
3. 让⽂字⽔平对齐
(1) 左对齐
ctx.fillText(text, x, y + lineHeight / 2);
(2) 居中对齐
ctx.fillText(text, x + width / 2, y + lineHeight / 2);
(3) 右对齐
ctx.fillText(text, x + width, y + lineHeight / 2);
三、绘制多⾏⽂本
1. 根据⽂字宽度和字体⼤⼩将长⽂字分割为多段⽂字
/**
* 将⼀段⽂字拆成多段
* @params ctx CanvasRenderingContext2D
* @param text ⽂字内容
* @param fontSize ⽂字⼤⼩
* @param width ⽂字限定的宽度
* @param maxLine ⽂字最多显⽰多少⾏
* @return 多段⽂字
*/
const splitText = (
ctx: CanvasRenderingContext2D,
text:string,
fontSize:number,
width:number,
maxLine:number,
): Array<{text:string, width:number}> => {
const arr: Array<{text:string, width:number}> = [];
// 记录剩余⽂字
let remainText = text;
while (arr.length < maxLine -1 && asureText(remainText).width > width) {
// 估算⼀⾏能容纳多少⽂字
let assumTextNum = Math.floor(width / fontSize);
// 计算假定⽂字的宽度
let {width:assumTextWidth} = asureText(remainText.substr(0, assumTextNum)); if (assumTextWidth > width) {
while (assumTextWidth > width) {
assumTextWidth = asureText(remainText.substr(0, --assumTextNum)).width;
}
}else {
while (assumTextWidth <= width) {
assumTextWidth = asureText(remainText.substr(0, ++assumTextNum)).width; }
assumTextWidth = asureText(remainText.substr(0, --assumTextNum)).width;
}
arr.push({
text: remainText.substr(0, assumTextNum),
width:assumTextWidth,
});
remainText = remainText.substr(assumTextNum);
}
arr.push({
text: remainText,
width: asureText(remainText).width,
});
return arr;
};
2. 将分割后的多段⽂字，按照单⾏⽂字的绘制⽅式⼀⼀绘制，代码如下
const texts =splitText(ctx, text, fontSize, width, maxLine);
for (let i =0; i < texts.length; i++) {
const txtObj = texts[i];
const offsetY = i * lineHeight;
// 绘制单⾏⽂字
drawSingleLineText(ctx, , fontSize, x, y + offsetY, width, lineHeight);            }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。