Canvas--文字

文字的绘制

在Canvas中绘制文字，可以使用strokeText或fillText方法。从名字上可以看出，一个是用填充方法而另一个则是用描边方法。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d'); 
let str = 'Hello World';
ctx.strokeText(str, 100, 100);

strokeText或fillText都接受3个参数，分别是需要绘制的文字内容

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d'); 
ctx.font = "50px sans-serif";
let str = 'Hello World';
ctx.fillText(str, 100, 100);

文字的对齐

水平对齐

文字的水平对齐可以用textAlign属性来控制，分别有“left”，“center”，“right”。

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d'); 
ctx.font = "50px sans-serif";
ctx.textAlign = 'center';
let str = 'Hello World';
ctx.fillText(str, 100, 100);

那如果我希望文字居中显示是不是像上面将textAlign属性的值赋成“center”就行了？先看看效果。

可以看到文字并没有居中，相反还往左边移了，这是怎么回事？

原因是文字位置的计算方法。textAlign属性实际上设置的是文字水平位置计算的起始位置，默认为“left”。结合上面的代码，例子中的文字的水平位置是“最左侧在x轴正方向100px的位置”。

而将其改成“center”，则意味着文字的正中间位于x轴正方向100px的位置上，自然整体是向左移的。

不过现在仅需要将文字的水平位置修改为容器宽度的一半就可以了。

垂直居中

垂直居中与水平居中原理是一样的。只不过垂直居中是修改textBaseline属性，该属性有3个值：“top”，“middle”，“bottom”。

那么想要垂直居中，就需要把textBaseline的值修改为“middle”，然后将垂直位置修改为容器高度的一半。

获取文本宽度

通过measureText方法可以获取文本的宽度

const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d'); 
let width = ctx.measureText(str).width;