leonsansというライブラリを使うと、Canvas上にJavaScriptで文字を描くことができます。
公式のサンプルをみると実際にどんなことができるのかがわかります。
組み合わせとアイデア次第では無限大にいろいろできすそうです。
メニューごとのサンプルやGithubにGIF画像もあります。
CDNやnpmパッケージは用意されていません。
Githubからダウンロードし、
zip展開したあとにでてくるdist/leon.jsファイルをHTMLから読み込ませましょう。
<script src="leon.js"></script>LeonSansをnewし、draw関数の引数にCanvasの2D Contextをわたすことで、Canvas上に描画されます。
const canvas = document.createElement('canvas');
cosnt ctx = canvas.getContext("2d");
leon = new LeonSans({
text: 'The quick brown\nfox jumps over\nthe lazy dog',
color: ['#000000'],
size: 80,
weight: 200
});
leon.draw(ctx);PIXIの場合は、drawの代わりにdrawPixi関数を使用します。
leon.drawPixi(graphics)