Question

我正在尝试使用Javascript制作一些UI按钮。因此，我做了下面的函数，应该在调用它时绘制一个函数。

const cvs = document.getElementById('canvas');
const ctx = cvs.getContext('2d');
let cell = 32;
function Button (buttonText,buttonFunction,buttonPositionX,buttonPositionY,collor,buttonSizeX,buttonSizeY){
    ctx.fillStyle = 'black';
    ctx.fillRect(buttonPositionX*cell,buttonPositionY*cell,buttonSizeX,buttonSizeY);
    ctx.fillStyle = collor;
    ctx.fillRect(buttonPositionX*cell+5,buttonPositionY*cell+5,buttonSizeX,buttonSizeY);
    ctx.fillStyle = "white";
    ctx.font = "30px Changa one";
    ///////////////////////////////////
    let textX = 30*buttonText.length;
    textX = ( buttonSizeX - textX ) /2; 
    ctx.fillText(buttonText,textX,buttonPositionY-30);
    ///////////////////////////////////
}
Button('Play',1,17,2,'green',cell*4,cell*2);

<html>
    <head>
        <canvas id = 'canvas' width = '1280' height = '640'></canvas>
    </head>
</html>

我需要将按钮的文本居中放置在按钮内部，但是由于我不能在buttonText上使用.length专有性，因此按钮要么不能正常工作，因为当仅在函数内部声明它时，它就成为常量（没有错误）在控制台中），或者由于某种原因它会获得一些疯狂的价值，并在画布的外部绘制文本。

这是我的问题。

如何将给定文本居中放置在按钮内？

Answer 1

您可以向按钮添加内联样式。

ctx.style = "text-align: center";

您可以详细了解here

Answer 2

ctx.textAlign = "center";
ctx.textBaseline='middle';

编辑：参见下面的小提琴。 https://jsfiddle.net/f2tkexrL/130/

JavaScript中心Align Texxt

2 个答案: