canvasのテキストを中央配置
canvasでテキストを中央揃えするデモ。
canvasのテキストを中央配置する
const textArray: typeTextArray[] = [
{
id: "hogehoge", // id
name: "ほげ", // 描画する文字
x: 75, //ベースとなるX座標
y: 50, //ベースとなるY座標
fontSize: 16, // font-size
color: "0,0,0", // font-color
baseText: "ほげほげ", // ベースとなる文字
mode: "center",
},
];
/**
* テキストを中心に配置するためのx座標を返す
*/
const setTextCenter = (
textWidth: number,
BASE_WIDTH: number,
BASE_X: number
) => {
const returnData = (BASE_WIDTH - textWidth) / 2 + BASE_X;
// (ベースとなるテキストのwidth - 描画するテキストのwidth) / 2 + ベースとなるx座標;
//canvasの中央に配置したい場合
// (ベースとなるテキストのwidth - canvasのwidth) / 2;
return returnData;
};
参考サイト
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/measureText