canvasで特定の幅で文字を折り返して表示する (original) (raw)
やりたいこと
canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。
何も処理しないと↓みたいに文字が詰まって表示される
実装
①文字を任意の文字数ごとに分割して配列に入れていく
const src = "あ".repeat(30); const results = []; let tmp = ""; src.split("").map((row) => { tmp = tmp + row;
if (tmp.length === 16) { results.push(tmp);
tmp = "";} });
const length = results.join("").length; results.push(src.slice(length));
②配列の文字列をfillText()で描画していく
ctx.fillStyle = "black"; ctx.font = "16px serif"; results.map((result, index) => {
ctx.fillText(result, 0, 30 + (16 * index)); });
