初面网初面网

文字

两种方法:fillText, strokeText

fillText

此方法会直接绘制到画布上,而不会修改当前路径,因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。

// 加粗 尺寸 字体
ctx.font = 'bold 50px serif';
// text,x,y,[maxWidth]
ctx.fillText('防伪水印', 300,300,1000);

strokeText

绘制文字轮廓。

文字方向

// rtl, ltr
ctx.direction = 'rtl'; // 从右到左

// 对齐方式 left/right/center/start/end
ctx.textAlign = 'left'; // 以起点为轴心点

// 如果同时开启direction和textAlign, textAlign的start和end会受影响

纵向方向的对齐有:top/hanging/middle/alphabetic/ideographic/bottom

其中:

top和ideographic是所有字符的顶部和底部

hanging和alphabetic是字母的顶部和底部

更新于 2025/2/26