// ожидаем загрузку
window.onload = function(){
  // рисуем часы
  clock('canvas_M');
  clock('canvas_CH');
}
//s
function clock(id) {
  // получаем текущие дату и время
  var now = new Date();
  var sec = now.getUTCSeconds();
  var min = now.getUTCMinutes();
  var belt = (id == 'canvas_M') ? 4 : 6;
  var hr = now.getUTCHours()+belt;

  // получаем контекст canvas
  //alert(id);
  var ctx = document
  .getElementById(id)
  .getContext("2d");

  // сохраняем состояние
  ctx.save();
  // инициализируем холст
  ctx.clearRect(0,0,112,112);
  // рисуя в точке 0,0 фактически
  // рисуем в точке 75,75
  ctx.translate(56,55);
  // при рисовании линии в 100px
  // фактически рисуем линию в 40px
  ctx.scale(0.4,0.4);
  // начинаем вращать с 12:00
  ctx.rotate(-Math.PI/2);

  // инициализируем свойства рисунка
  // контуры рисуем черным
  ctx.strokeStyle = "#333333";
  // заливка тоже черная
  ctx.fillStyle = "#333333";
  // ширина линии 8px
  ctx.lineWidth = 8;
  // будем рисовать по кругу
  ctx.lineCap = "round";

  // начинаем рисовать часовые метки
  // сохраняем предыдущее состояние
  ctx.save();
  // начинаем рисовать часовую стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/6)*hr +
             (Math.PI/360)*min +
             (Math.PI/21600)*sec);
  // устанавливаем ширину линии 14px
  ctx.lineWidth = 7;

  ctx.beginPath();
  // сдвигаем курсор несколько назад
  // стобы было похоже на стрелку
  ctx.moveTo(7,0);
  // рисуем линию почти до часовых меток
  ctx.lineTo(70,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать минутную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/30)*min +
             (Math.PI/1800)*sec);
  // ширина линии 10px
  ctx.lineWidth = 5;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(10,0);
  // рисуем линию
  ctx.lineTo(85,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать секундную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate(sec * Math.PI/30);
  // контур и заливка красного цвета
  ctx.strokeStyle = "#333333";
  ctx.fillStyle = "#333333";
  // ширина линии 6px
  ctx.lineWidth = 2;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(-30,0);
  // рисуем линию
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // рисуем внешнюю окружность
  // шириной 14px
  ctx.lineWidth = 14;
  // синим цветом
  ctx.strokeStyle = "#325FA2";
  ctx.beginPath();
  ctx.stroke();
  ctx.restore();

  ctx.restore();
  setTimeout('clock("'+id+'")', 1000)
}