【javascript】canvasでシンプルなアナログ時計を描いてみた

 

 

概要

 

html5のcanvasでアナログ時計の簡単なデモプログラムを書いてみました。

 

 

 

環境

 
IDCFクラウド環境

  • サーバー (仮想マシン・ハードウェア専有マシン)
    S1 プラン メモリ1G

  • ボリューム(ディスク)
    基本 15GB

  • オブジェクトストレージサービス
    50GB

  • WordPressは仮想マシンKUSANAGI環境で使用

 

 

 

WordPressでjavascriptを動かす方法

 

 

Javascriptのプログラムをどこにどうやって設置するか方法はいろいろあると思いますが、ここでは一番簡単な方法でjavascriptを動かしてみます。

 

新規に記事または個別ページを作成して、HTMLが記述できる「テキスト」で以下のコードを記述します。

 

<div>
<script type="text/javascript">
//ここにjavascriptのコードを記述する
</script>
</div>

 

javascriptは上記コメント箇所にコードを記述します。

以上です

 

※他にも、プラグインを使用したり、カスタムフィールドを使用したり、さまざまな方法があります。

 

 

 

スクリプト

 
アナログ時計の描画は、HTML5のCanvas APIを利用して、素のjavascriptで書いています。

 

HTML5のcanvasとはmozilla MDN web Docsで次のように説明されています。

HTML5 で導入された canvas要素は、JavaScript によるスクリプティングによって図形などを描画するために使用します。例えば、グラフを描く、写真を合成する、アニメーションを作成する、動画のリアルタイム加工やレンダリングに用いる事が出来ます。Canvas API - Mozilla MDN Web Docs

 

Canvas APIを利用すると、Web上にさまざまな図形を描画することが可能になります。ただし、HTML5がサポートされていないブラウザには描画できませんので、対象ブラウザとバージョンを限定して使用する必要があります。

 

詳しい仕様については、こちらのサイトを参考にさせていただきました。

 

 

実際のスクリプトはこちらです。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clock</title>
 
<script type="text/javascript">
<!--
window.onload = function()
{
 var width = 100; //横幅を指定します
 var height = 100; //高さを指定します
 var centerX = Math.floor(width / 2); //中心点を算出します(x)
 var centerY = Math.floor(height / 2); //中心点を算出します(y)
 var canvas = document.getElementById('clock'); //CANVASのエレメントを取得します
 var context = canvas.getContext('2d'); //CANVASの2D描画コンテキストを取得します
 
 //setInterval関数に、時計描画メイン関数を設定して、1秒ごとに関数を呼び出す
 setInterval(drawClock, 1000);
 
 //時計描画のメイン関数
 function drawClock() {
 
 var date = new Date(); //Date関数により現時点のローカル時間を取得します
 var hour = date.getHours(); //時刻(時)を取得します
 var minute = date.getMinutes(); //時刻(分)を取得します
 var second = date.getSeconds(); //時刻(秒)を取得します
 
 
 // 色の指定
 context.strokeStyle = '#666666'; //時計のフレームの色を指定します
 
 context.clearRect(0, 0, canvas.width, canvas.height); //CANVASの領域をクリアします
 
 // 文字盤の描画
 context.beginPath();
 context.arc(centerX, centerY, centerX - 1, 0, Math.PI*2, false); //centerX,centerYを中心に半径centerX-1の円を描画します
 context.stroke(); //描画を実行する
 
 context.save(); //現在のカーソル情報を保存する
 context.translate(width/2, height/2); //カーソルを中心に移動する
 for(var i=0;i < 360; i+= 30){
 context.rotate( 30 * Math.PI / 180); //30度ずつ回転する
 context.beginPath();
 context.moveTo(0, centerY * 0.8); //時計の目盛を描画する(始点)
 context.lineTo(0, centerY * 0.9); //時計の目盛を描画する(終点)
 context.stroke(); //描画を実行する
 }
 context.translate(-width/2, -height/2); //カーソル位置を元に戻す
 context.restore(); //カーソル情報を元の戻す
 
 context.strokeStyle = '#333333';
 
 //短針を描画する
 drawHand(centerY * 0.5, hour * 30 + minute / 60 * 30);
 //長針を描画する
 drawHand(centerY * 0.8, minute * 6 + second / 60 * 6);
 
 context.strokeStyle = '#EE0000';
 //秒針を描画する
 drawHand(centerY * 0.8, second * 6);
 }
 
 // 針の描画
 function drawHand(length, angle){
   //現在のコンテキスト情報を保存します
   context.save();
   //カーソルを時計の中心に移動します
   context.translate(centerX, centerY);
   //指定角度分だけ回転します 
   context.rotate( angle * Math.PI / 180);
   context.beginPath();
   context.moveTo(0, 0);
   context.lineTo(0, -length);
   context.stroke();
   context.translate(-centerX, -centerY);
   //現在のコンテキスト情報を前回save時点に復元します 
   context.restore();
 }
}
//-->
</script>
 
</head>
<body>
<canvas id="clock"></canvas>
</body>
</html>

 

ちなみに、Javascriptでグラフィックを描画する方法はHTML5のCanvasタグを使用する以外にも、「JavaScript Graphics Library (JSGL)」を使うという方法があります。このJSGLを使用すると、HTML5がサポートされていないブラウザでもグラフィック描画が可能になります。
 

 

 

まとめ

 

トップ画面に適当な時計を作りたくていろいろ探していましたが、適当なのがなくて自作しました。トップ画面のアナログ時計はとってつけた感が否めませんが、時刻は正確に刻んでいます^^;

関連記事

 

主要都市の時刻をアナログ時計で表示してみた。

 

 

 

参考