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/

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/

将文本居中放置在画布矩形内（按钮）

1 个答案: