// ожидаем загрузку window.onload = function(){ // рисуем часы clock(); // через каждую секунду // часы перерисовываются setInterval(clock, 1000); } // function clock() { // получаем текущие дату и время var now = new Date(); var sec = now.getSeconds(); var min = now.getMinutes(); var hr_ru = now.getHours(); var hr_sw = now.getHours() - 2; var hr_de = now.getHours() - 2; // получаем контекст canvas var ctx_ru = document .getElementById("canvas_ru") .getContext("2d"); var ctx_sw = document .getElementById("canvas_sw") .getContext("2d"); var ctx_de = document .getElementById("canvas_de") .getContext("2d"); // сохраняем состояние ctx_ru.save(); // инициализируем холст ctx_ru.clearRect(0,0,78,78); // рисуя в точке 0,0 фактически // рисуем в точке 39,39 ctx_ru.translate(39,39); // при рисовании линии в 78px // фактически рисуем линию в 40px ctx_ru.scale(0.4,0.4); // начинаем вращать с 12:00 ctx_ru.rotate(-Math.PI/2); // сохраняем предыдущее состояние ctx_ru.save(); // вращаем холст на текущую позицию ctx_ru.rotate((Math.PI/6)*hr_ru + (Math.PI/360)*min + (Math.PI/21600)*sec); // устанавливаем ширину линии 14px ctx_ru.lineWidth = 4; ctx_ru.beginPath(); // сдвигаем курсор несколько назад // стобы было похоже на стрелку ctx_ru.moveTo(-20,0); // рисуем линию почти до часовых меток ctx_ru.lineTo(40,0); ctx_ru.stroke(); ctx_ru.restore(); // сохраняем состояние ctx_ru.save(); // начинаем рисовать минутную стрелку // вращаем холст на текущую позицию ctx_ru.rotate((Math.PI/30)*min + (Math.PI/1800)*sec); // ширина линии 10px ctx_ru.lineWidth = 4; ctx_ru.beginPath(); // двигаем курсор ctx_ru.moveTo(-28,0); // рисуем линию ctx_ru.lineTo(60,0); ctx_ru.stroke(); ctx_ru.restore(); // сохраняем состояние ctx_ru.save(); // начинаем рисовать секундную стрелку // вращаем холст на текущую позицию ctx_ru.rotate(sec * Math.PI/30); // контур и заливка красного цвета ctx_ru.strokeStyle = "#D40000"; ctx_ru.fillStyle = "#D40000"; // ширина линии 6px ctx_ru.lineWidth = 3; ctx_ru.beginPath(); // двигаем курсор ctx_ru.moveTo(-30,0); // рисуем линию ctx_ru.lineTo(65,0); ctx_ru.stroke(); ctx_ru.restore(); // сохраняем состояние ctx_ru.save(); ctx_ru.restore(); ctx_ru.restore(); // сохраняем состояние ctx_sw.save(); // инициализируем холст ctx_sw.clearRect(0,0,78,78); // рисуя в точке 0,0 фактически // рисуем в точке 39,39 ctx_sw.translate(39,39); // при рисовании линии в 78px // фактически рисуем линию в 40px ctx_sw.scale(0.4,0.4); // начинаем вращать с 12:00 ctx_sw.rotate(-Math.PI/2); // сохраняем предыдущее состояние ctx_sw.save(); // вращаем холст на текущую позицию ctx_sw.rotate((Math.PI/6)*hr_sw + (Math.PI/360)*min + (Math.PI/21600)*sec); // устанавливаем ширину линии 14px ctx_sw.lineWidth = 4; ctx_sw.beginPath(); // сдвигаем курсор несколько назад // стобы было похоже на стрелку ctx_sw.moveTo(-20,0); // рисуем линию почти до часовых меток ctx_sw.lineTo(40,0); ctx_sw.stroke(); ctx_sw.restore(); // сохраняем состояние ctx_sw.save(); // начинаем рисовать минутную стрелку // вращаем холст на текущую позицию ctx_sw.rotate((Math.PI/30)*min + (Math.PI/1800)*sec); // ширина линии 10px ctx_sw.lineWidth = 4; ctx_sw.beginPath(); // двигаем курсор ctx_sw.moveTo(-28,0); // рисуем линию ctx_sw.lineTo(60,0); ctx_sw.stroke(); ctx_sw.restore(); // сохраняем состояние ctx_sw.save(); // начинаем рисовать секундную стрелку // вращаем холст на текущую позицию ctx_sw.rotate(sec * Math.PI/30); // контур и заливка красного цвета ctx_sw.strokeStyle = "#D40000"; ctx_sw.fillStyle = "#D40000"; // ширина линии 6px ctx_sw.lineWidth = 3; ctx_sw.beginPath(); // двигаем курсор ctx_sw.moveTo(-30,0); // рисуем линию ctx_sw.lineTo(65,0); ctx_sw.stroke(); ctx_sw.restore(); // сохраняем состояние ctx_sw.save(); ctx_sw.restore(); ctx_sw.restore(); // сохраняем состояние ctx_de.save(); // инициализируем холст ctx_de.clearRect(0,0,78,78); // рисуя в точке 0,0 фактически // рисуем в точке 39,39 ctx_de.translate(39,39); // при рисовании линии в 78px // фактически рисуем линию в 40px ctx_de.scale(0.4,0.4); // начинаем вращать с 12:00 ctx_de.rotate(-Math.PI/2); // сохраняем предыдущее состояние ctx_de.save(); // вращаем холст на текущую позицию ctx_de.rotate((Math.PI/6)*hr_de + (Math.PI/360)*min + (Math.PI/21600)*sec); // устанавливаем ширину линии 14px ctx_de.lineWidth = 4; ctx_de.beginPath(); // сдвигаем курсор несколько назад // стобы было похоже на стрелку ctx_de.moveTo(-20,0); // рисуем линию почти до часовых меток ctx_de.lineTo(40,0); ctx_de.stroke(); ctx_de.restore(); // сохраняем состояние ctx_de.save(); // начинаем рисовать минутную стрелку // вращаем холст на текущую позицию ctx_de.rotate((Math.PI/30)*min + (Math.PI/1800)*sec); // ширина линии 10px ctx_de.lineWidth = 4; ctx_de.beginPath(); // двигаем курсор ctx_de.moveTo(-28,0); // рисуем линию ctx_de.lineTo(60,0); ctx_de.stroke(); ctx_de.restore(); // сохраняем состояние ctx_de.save(); // начинаем рисовать секундную стрелку // вращаем холст на текущую позицию ctx_de.rotate(sec * Math.PI/30); // контур и заливка красного цвета ctx_de.strokeStyle = "#D40000"; ctx_de.fillStyle = "#D40000"; // ширина линии 6px ctx_de.lineWidth = 3; ctx_de.beginPath(); // двигаем курсор ctx_de.moveTo(-30,0); // рисуем линию ctx_de.lineTo(65,0); ctx_de.stroke(); ctx_de.restore(); // сохраняем состояние ctx_de.save(); ctx_de.restore(); ctx_de.restore(); }