アットウィキロゴ
チュートリアル
アットウィキロゴ
チュートリアル
ページ一覧

Analog Watch サンプル

１．index.htmlを準備する。

１−１．canvasを実装する。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>AnalogWatch</title>
</head>
<body>
  <canvas width="300" height="300" id="canvas"> 
    This browser is not supported
  </canvas>
  <script>
  </script>
</body>
</html>

２．canvasに時計の盤面を描画する。

２−１．定義

    var canvas  = document.getElementById("canvas"),
    context = canvas.getContext('2d');
    var clockRadius = canvas.width / 2;

２−２．描画処理

    watch();
    
    function watch() {
      context.font = '30px Tahoma';
      context.textAlign = 'center';
      context.textBaseline = 'middle';
      context.fillStyle = '#555';
      context.translate(canvas.width / 2, canvas.height / 2);
      context.beginPath();
      
      for (var i = 1; i <= 12; i++) {
        var angle = (i - 3) * (Math.PI * 2) / 12,
        dx = clockRadius * 0.7 * Math.cos(angle),
        dy = clockRadius * 0.7 * Math.sin(angle);
        context.fillText(i, dx, dy);
      }
    }

２−３．実行結果


３．短針、長針、秒針を描画してみる

３−１．function watch()に追記

      //短針
      context.save();
      context.rotate(0*Math.PI/180);
      context.beginPath();
      context.moveTo(-15, -5);
      context.lineTo(-15, 5);
      context.lineTo(clockRadius * 0.5, 2);
      context.lineTo(clockRadius * 0.5, -2);
      context.fill();
      context.restore();
      //長針
      context.save();
      context.rotate(120*Math.PI/180);
      context.beginPath();
      context.moveTo(-15, -4);
      context.lineTo(-15, 4);
      context.lineTo(clockRadius * 0.7, 1);
      context.lineTo(clockRadius * 0.7, -1);
      context.fill();
      context.restore();
      //秒針
      context.save();
      context.rotate(240*Math.PI/180);
      context.beginPath();
      context.moveTo(-15, -2);
      context.lineTo(-15, 2);
      context.lineTo(clockRadius * 0.7, 0);
      context.fillStyle = '#f00';
      context.fill();
      context.restore();

３−２．実行結果


４．１秒毎に現在の時間を表示させてみる

４−１．以下のとおり書き換える

watch();
    ↓
setInterval(watch, 1000);

４−２．function watch()の最初にクリア処理と時間取得処理を挿入する

      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.save();
      
      var date = new Date(),
      hours = date.getHours(),
      minutes = date.getMinutes(),
      seconds = date.getSeconds(),
      hour = hours + minutes / 60,
      minute = minutes + seconds / 60;

４−３．短針、長針、秒針を取得した時間を示すように書き換える

      //短針
      context.rotate(0*Math.PI/180);
          ↓
      angle = 2 * (hours - 3) * Math.PI / 12;
      context.rotate(angle);

      //長針
      context.rotate(120*Math.PI/180);
          ↓
      angle = 2 * (minutes - 15) * Math.PI / 60;
      context.rotate(angle);

      //秒針
      context.rotate(240*Math.PI/180);
          ↓
      angle = 2 * (seconds - 15) * Math.PI / 60;
      context.rotate(angle);

４−４．実行結果


５．完成

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>AnalogWatch</title>
</head>
<body>
  <canvas width="300" height="300" id="canvas"> 
    This browser is not supported
  </canvas>
  <script>
    var canvas  = document.getElementById("canvas"),
    context = canvas.getContext('2d');
    var clockRadius = canvas.width / 2;
    
    setInterval(watch, 1000);
    
    function watch() {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.save();
      
      var date = new Date(),
      hours = date.getHours(),
      minutes = date.getMinutes(),
      seconds = date.getSeconds(),
      hour = hours + minutes / 60,
      minute = minutes + seconds / 60;
    
      context.font = '30px Tahoma';
      context.textAlign = 'center';
      context.textBaseline = 'middle';
      context.fillStyle = '#555';
      context.translate(canvas.width / 2, canvas.height / 2);
      context.beginPath();
      
      for (var i = 1; i <= 12; i++) {
        var angle = (i - 3) * (Math.PI * 2) / 12,
        dx = clockRadius * 0.7 * Math.cos(angle),
        dy = clockRadius * 0.7 * Math.sin(angle);
        context.fillText(i, dx, dy);
      }
      
      //短針
      context.save();
      angle = 2 * (hours - 3) * Math.PI / 12;
      context.rotate(angle);
      context.beginPath();
      context.moveTo(-15, -5);
      context.lineTo(-15, 5);
      context.lineTo(clockRadius * 0.5, 2);
      context.lineTo(clockRadius * 0.5, -2);
      context.fill();
      context.restore();
      //長針
      context.save();
      angle = 2 * (minutes - 15) * Math.PI / 60;
      context.rotate(angle);
      context.beginPath();
      context.moveTo(-15, -4);
      context.lineTo(-15, 4);
      context.lineTo(clockRadius * 0.7, 1);
      context.lineTo(clockRadius * 0.7, -1);
      context.fill();
      context.restore();
      //秒針
      context.save();
      angle = 2 * (seconds - 15) * Math.PI / 60;
      context.rotate(angle);
      context.beginPath();
      context.moveTo(-15, -2);
      context.lineTo(-15, 2);
      context.lineTo(clockRadius * 0.7, 0);
      context.fillStyle = '#f00';
      context.fill();
      context.restore();
      context.restore();
    }
  </script>
</body>
</html>
「Analog Watch サンプル」をウィキ内検索
最終更新：2013年07月28日 03:44