文字的绘制
在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;