目次
本記事では、Canvasでテキストを重ねて描画する方法をご紹介しています。
Canvasでテキストを重ねて描画したいんだけど、どうすればいいんだろう？
上記の疑問にお答えします。
では、解説していきます。
スポンサーリンク
本記事で作成する内容
今回作成するのは、テキストを重ねて描画したCanvasです。下記のデモで内容をご確認いただけます。
See the Pen by ryohei (@intotheprogram) on CodePen.
テキストの描画については下記の記事でご紹介しております。Canvasでのテキストの描画について触れたことがない場合は、下記の記事を参考にしていただければと思います。
では本題に戻りまして、Canvasにテキストを重ねて描画する方法をご紹介していきます。
Canvasを設置する
まずはベースとなるCanvas_APIを設置します。Canvasは下記のようにcanvas要素で設置することができます。widthとheight属性の値は環境に合わせて変更してください。
<canvas id="canvas" width="500" height="100"></canvas>
Web のCanvas APIでは、HTMLのcanvas要素とJavaScriptを用いて描画する内容を指定することができます。Canvasの設置は完了しましたので、続いてJavaScriptで描画するテキストを指定します。
スポンサーリンク
JavaScriptでテキストを重ねて描画する
Canvasの設置が完了したら、JavaScriptで描画するテキストの内容を指定します。今回は本サイト名を単語にわけて描画します。テキストの表示位置については、各テキストのX軸を少しずらし、それぞれが少し重なるようにY軸に位置を調整します。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "40px Times New Roman";
ctx.fillText("Into", 0, 40);
ctx.font = "40px Times New Roman";
ctx.strokeText("the", 20, 60);
ctx.font = "40px Times New Roman";
ctx.fillText("Program", 40, 80);
以上でCanvasにテキストを重ねて描画することができます。要素の裏側に設置したり、セクションのタイトルにしたりと応用が利きそうなので、ぜひ使ってみてくださいね。
最後に
Canvasは本当に奥が深くて、サイトで使用するアニメーションはもちろん、テトリスやレースといったブラウザ上で実行するゲームも作ることができます。気になった方はGoogle等で調べてみて、Canvasの沼にハマってくださいね！
以上、Canvasでテキストを重ねて描画する方法のご紹介でした！
