var ctx;
  var intervalID = NaN;

  function init() {
    var canvas = document.getElementById("aaa");
    ctx = canvas.getContext("2d");
    ctx.translate(125,125); //0,0を125,125へ移動

    clearInterval(intervalID);
    intervalID = setInterval(moveClock, 1000);

  }

  function moveClock() {
 
    ctx.clearRect(-125, -125, 250, 250);//描画をいったん全部消す

    //時計板の円を描く
    ctx.strokeStyle = "#aaaaaa";
    ctx.fillStyle = "#00ffff";
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.arc(0, 0, 100, 0, 2*Math.PI); //125,125を中心とする半径100の円
    ctx.closePath();
    ctx.stroke();

    //現在時刻を取得
    var now = new Date();
    h = now.getHours() % 12; //24時間表記から12時間表記へ
    m = now.getMinutes();
    s = now.getSeconds();

    document.getElementById("now").textContent = h + "時" + m + "分" + s + "秒";

    //短針は12時間で1回転、角度は360÷12= 30度ずつ回転する
    //長針は1時間で1回転、角度は360÷60= 6度ずつ回転する
    //秒針は1分で1回転、　〃

    var tansinAngle = 30/180*Math.PI * h; //短針の角度
    var chosinAngle = 6/180*Math.PI * m; //長針の角度
    var byosinAngle = 6/180*Math.PI * s; //秒針の角度


    document.getElementById("debug").textContent = "短針角度：" + 30*h + " 長針角度：" + 6*m + " 秒針角度: " + 6*s;


    ctx.save(); //状態を保持
    ctx.rotate(byosinAngle); //秒針ぶんだけ回転させて
    //秒針の描画
    ctx.strokeStyle = "#666666"; //線の色
    ctx.lineWidth = 1; //線の幅
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -90);
    ctx.stroke();
    ctx.restore(); //状態をsaveのポイントに戻す


    ctx.save(); //状態を保持
    ctx.rotate(chosinAngle); //長針ぶんだけ回転させて
    //長針の描画
    ctx.strokeStyle = "#6666ff"; //線の色
    ctx.lineWidth = 3; //線の幅
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -80);
    ctx.stroke();
    ctx.restore(); //状態をsaveのポイントに戻す



    ctx.save(); //状態を保持
    ctx.rotate(tansinAngle); //秒針ぶんだけ回転させて
    //秒針の描画
    ctx.strokeStyle = "#ff6666"; //線の色
    ctx.lineWidth = 5; //線の幅
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -50);
    ctx.stroke();
    ctx.restore(); //状態をsaveのポイントに戻す


  }