HTML5 Canvasで円の中にテキストを描画する方法

HTML5 Canvasで円の中にテキストを描画する方法

HTML5のCanvas（キャンバス）を使うと、図形だけでなく、その中にテキストを配置することもできます。ここでは、円形の中にテキストを描画する方法を解説します。

基本の考え方

円の中にテキストを表示するには、まず context.beginPath() を呼び出して新しいパスを開始し、arc() で円を描いた後、fillText() でテキストを重ねて描画します。

サンプルコード

以下は、Canvas要素がクリックされた位置に、青い円とその中央に白いテキストを描画する例です。

$("#demo").on("click", "#canvas1", function(event) {
    var canvas = document.getElementById('canvas1');
    if (canvas.getContext) {
        var context = canvas.getContext("2d");
        var w = 25;
        var x = event.pageX;
        var y = Math.floor(event.pageY - $(this).offset().top);

        // 円を描画
        context.beginPath();
        context.fillStyle = "blue";
        context.arc(x, y, w / 2, 0, 2 * Math.PI, false);
        context.fill();

        // テキストを描画
        context.font = '9pt Arial';
        context.fillStyle = 'white';
        context.textAlign = 'center';
        context.fillText('amit', x, y + 4);
    }
});

HTMLの構造

Canvas要素は、次のようにマークアップします。

<div id="demo">
    <canvas id="canvas1"></canvas>
</div>

コードのポイント

• beginPath()：新しいパスを開始するメソッドです。呼び出さないと以前のパスが引き継がれ、意図しない描画になることがあります。
• arc(x, y, 半径, 開始角, 終了角)：中心座標と半径、角度を指定して円を定義します。完全な円の場合は 0 から 2π（Math.PI × 2）を指定します。
• textAlign = 'center'：テキストの揃え位置を中央に設定することで、円の中心に文字を配置しやすくなります。
• fillText(テキスト, x, y)：指定した座標にテキストを描画します。垂直方向の見た目を整えるため、y座標に少しオフセット（+4px）を加えています。

このように、Canvas APIの基本メソッドを組み合わせるだけで、円の中にテキストを表示する図形を簡単に作成できます。バッジやアイコンなど、さまざまなUI要素にも応用できるので、ぜひ活用してみてください。