カテゴリー: HTML5

投稿日:

HTML5のcanvas要素で鉄道信号を描いてみた

まだ初心者なので、この程度しかできません。

最もよく使われている、3灯式鉄道信号の進行現示をcanvas要素で描いてみました。

ソースコード

<!DOCTYPE html>
<head>
   <title>鉄道信号　-　進行</title>
</head>
<body>
   <canvas id="sig" width="240" height="350">
      <p>この記事はHTML5を使用しております。
そのため、HTML5に対応していないブラウザからはこの表示しか出ません。</p>
   </canvas>

   <script>
   var sig = document.getElementById('sig');
   var context = sig.getContext('2d');

   context.fillStyle = "#333333";
   context.fillRect(45, 80, 130, 120);
   context.closePath();

   context.beginPath();
   context.fillStyle = "#333333";
   context.arc(110, 205, 65, 0, Math.PI*2, false);
  context.fill();

   context.beginPath();
   context.fillStyle = "#333333";
   context.arc(110, 75, 65, 0, Math.PI*2, false);
  context.fill();
// 停止現示
   context.beginPath();
   context.fillStyle = "#666666";
//   context.fillStyle = "#FF0000";
   context.arc(110, 215, 30, 0, Math.PI*2, false);
  context.fill();
   context.closePath();
// 注意現示
   context.beginPath();
   context.fillStyle = "#666666";
//   context.fillStyle = "#EEFF05";
   context.arc(110, 140, 30, 0, Math.PI*2, false);
  context.fill();
   context.closePath();
// 進行現示
   context.beginPath();
   context.fillStyle = "#11BF11";
   context.arc(110, 65, 30, 0, Math.PI*2, false);
  context.fill();
   context.closePath();

   context.beginPath();
   context.fillStyle = "#333333";
   context.fillRect(80, 270, 60, 60);
   context.closePath();

   context.beginPath();
   context.fillStyle = "#FFFFFF";
   context.font = "55px 'ＭＳ Ｐゴシック'";
   context.fillText("１",90,320,60);
   context.closePath();
  </script>
</body>
</html>

また、ソースコードをいじると注意現示や停止現示にすることもできます。

ブログランキング・にほんブログ村へ
にほんブログ村
↑クリックお願いします。

当サイトではCookieを使用します。Cookieの使用に関する詳細は「プライバシーポリシー」をご覧ください。
同意する