JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 Canvasで度記号（°）を描画する方法

HTML5のCanvas上で温度や角度などを表示する際、度記号（°）が必要になることがあります。Canvasでは通常のHTMLエンティティ（°など）がそのまま使えないため、Unicode文字「°」を直接文字列に含めて描画するのが基本の方法です。

以下は、Canvasに「212°F（華氏212度）」というテキストを度記号付きで描画するサンプルコードです。

サンプルコード：度記号をCanvasに表示する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style media="screen">
      body {
        margin: 5em;
        background: #eee;
        text-align: center;
      }
      canvas {
        background: #fff;
        border: 2px solid #ccc;
        display: block;
        margin: 3em auto;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
    <script charset="utf-8">
      var c = document.getElementsByTagName('canvas')[0];
      c.width = c.height = 300;
      var context = c.getContext('2d');
      context.font = "20px sans-serif";
      context.fillText("212\u00B0 Fahrenheit", 100, 100);
    </script>
  </body>
</html>

ポイント解説

  • 文字コードの指定： <meta charset="utf-8"> を必ず指定しましょう。これにより、度記号などの特殊文字が正しく表示されます。
  • 度記号の記述方法： 文字列内に直接「°」を書くか、ユニコードエスケープシーケンス \u00B0 を使用します。どちらでも同じ結果になります。
  • フォントの設定： context.font = "20px sans-serif" のように、度記号に対応したフォントを指定しておくと安全です。
  • 描画位置： fillText(テキスト, x座標, y座標) の形式で、テキストを表示する位置を指定できます。

このコードを実行すると、白い背景のCanvas上に「212° Fahrenheit」というテキストが表示されます。気温グラフや角度計測ツールなど、数値と単位を組み合わせる場面でぜひ活用してください。

  1. HTML5 Canvasの変換（トランスフォーム）基本解説

    HTML5のCanvas APIには、変換行列（transformation matrix）を直接操作できるメソッドが用意されています。変換行列は初期状態で単位変換（identity transform）となっており、その後、各種の変換メソッドを呼び出すことで自由に調整できます。 主な変換メソッド translate(x, y)：座標原点を指定した位置へ移動します。 rotate(angle)：指定した角度（ラジアン）だけ描画内容を回転させます。 scale(x, y)：横方向・縦方向に拡大・縮小します。 transform(a, b, c, d, e, f)：現在の変換行列に、指定した行列

  2. HTML5でCanvas（キャンバス）を中央に配置する方法を徹底解説

    HTML5で<canvas>要素を画面の中央に配置する最もシンプルな方法は、canvasタグを<div>タグで囲み、そのdivに対して中央揃え（text-align:center）を指定することです。親要素であるdivが中央に配置されると、その中にあるcanvasも自動的に中央に表示されます。基本的な実装例<!DOCTYPE html> <html>    <body>       <div style=text-align:center;