canvas 画文字 #

设置文字所在矩形框的左下点位置 #

文字默认为 12px,所以左下点的 y 轴位置，至少得设置成 12 文字才能在界面上显示完全

设置字体大小以及字体 #

设置文本对齐方式 #

MDN: 文本水平对齐方式

MDN: 文本垂直对齐方式

• 文本对齐是基于 ctx.fillText('textAlign end', x, 20) 这个x位置来的
• 左对齐和右对齐是实际的反方向

绘制多行文本，多行文本设置不同的对齐方式 #

rotate 方法对文字进行旋转 #

MDN: rotate 详解

CanvasRenderingContext2D.rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。

语法 #

void ctx.rotate(angle);

angle 顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。

旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 translate() 方法移动 canvas。