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;