在画布矩形（按钮）内部居中文本

Question

是否有一种动态的方法可以根据高度、宽度、X、Y或矩形以及文本长度来居中文本？我正在尝试手动计算按钮文本的X/Y坐标，但困难重重。

忽略我使用roundRect方法制作圆角的事实，有什么好的方法可以使文本居中呢？

ctx.lineWidth = 4;
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#abc";
roundRect(ctx, 10, 10, 100, 50, 10, true);
ctx.font="20px Georgia";
ctx.fillStyle = "#000000";
var rectHeight = 50;
var rectWidth = 100;
var rectX = 10;
var rectY = 10;
ctx.fillText("Attack!",rectX+(rectWidth/2),rectY+(rectHeight/2));

请查看代码片段：http://jsfiddle.net/vu7dZ/1/

- bo_knows

---

也许你应该使用 ctx 的 textAlign 属性？ - Noble Mushtak

@Noble...没错，就是这样！ - markE

似乎已经完成了部分工作 http://jsfiddle.net/vu7dZ/2/ 有没有针对垂直坐标的textAlign？ - bo_knows

嘿嘿嘿 ctx.textBaseline="middle" 获取垂直对齐方式！http://jsfiddle.net/vu7dZ/3/ - bo_knows

Answer 1

答案主要在于textAlign="center"和textBaseline="middle"。这两个属性分别在水平空间和垂直空间对齐文本。

ctx.lineWidth = 4;
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#abc";
roundRect(ctx, 10, 10, 100, 50, 10, true);
ctx.font="20px Georgia";
ctx.textAlign="center"; 
ctx.textBaseline = "middle";
ctx.fillStyle = "#000000";
var rectHeight = 50;
var rectWidth = 100;
var rectX = 10;
var rectY = 10;
ctx.fillText("Attack!",rectX+(rectWidth/2),rectY+(rectHeight/2));

演示：http://jsfiddle.net/vu7dZ/4/

- bo_knows

---

如果这个矩形在画布内部是水平居中的呢？ - Si8

正是我正在寻找的。 - F.K

如果有人需要的话，我已经更新了 fiddle，通过减小文本大小来使文本适合框内，如果太大而无法适应。http://jsfiddle.net/andyg2/Lb7x0p5e/3/ - Andy Gee

或者将矩形放大以适应文本 http://jsfiddle.net/andyg2/Lb7x0p5e/4/ - Andy Gee