БлогNot. Javascript: рисуем идущие часы со стрелками

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

Javascript: рисуем идущие часы со стрелками

В коллекцию моих яваскрипт-часов, на этот раз - со стрелками и по-современному. Увы, а вот современные дети в большинстве своём не умеют определять время по таким часам, впрочем, скоро и взрослые разучатся :)

Картинка ниже сгенерируется, если ваш браузер поддерживает тег <canvas> и в нём включён Javascript:

Извините, ваш браузер не поддерживает тег canvas

Так как написано на яваскрипте, то показывается текущее время вашего компьютера.

Делать в начале скрипта многочисленные настройки я поленился, но общее понятие о рисовании часового круга, циферблата, стрелок и т.п. он даёт :) При большой или не квадратной канве, вроде бы, тоже ничего страшного произойти не должно.

Исходник на момент написания - ниже (без обрамления HTML; готов к встраиванию в любую страницу).

<div align="center">
<canvas id="clock" width="128" height="128">Извините, ваш браузер не поддерживает тег canvas</canvas>
<script type="text/javascript">

var oldSeconds = 0;

function updateClock() {
 var t = new Date();
 var clockArms = [t.getHours(), t.getMinutes(), t.getSeconds()];
 if (clockArms[2] == oldSeconds) return; //секунды не менялись? выйти
 oldSeconds = clockArms[2];
 
 var c = document.getElementById('clock');
 var ctx = c.getContext('2d');
 //очистить канву:
 ctx.fillStyle = 'white';
 ctx.fillRect(0, 0, c.width, c.height);
 //нарисовать контур часов:
 var x = Math.round(c.width/2);
 var y = Math.round(c.height/2);
 var r = Math.round(Math.min(x,y));
 ctx.beginPath(); 
 ctx.arc(x,y,r,0,2*Math.PI,true);
 ctx.fillStyle = 'rgb(200,200,200)';
 ctx.fill();
 ctx.lineWidth = 1;
 ctx.strokeStyle = 'rgb(128,128,128)';
 ctx.stroke();
 ctx.closePath();
 //нарисовать метки циферблата и цифры:
 ctx.save();
 ctx.textBaseline = "middle";
 ctx.textAlign = "center";
 ctx.shadowColor = "rgb(128,0,0)";
 ctx.shadowOffsetX = 3;
 ctx.shadowOffsetY = 3;
 ctx.shadowBlur = 6;
 var delta = Math.max(8,Math.round(r/10)); //для размера шрифта и отсечек
 ctx.font = 'bold '+delta+'pt sans-serif';
 var u=Math.PI/2;
 var r1=r-delta;
 for (var i=1; i<=12; i++) {
  ctx.beginPath();
  var x1 = x+Math.round(r1*Math.cos(u)), //так можно узнать позиции делений циферблата
      y1 = y-Math.round(r1*Math.sin(u)),
      x2 = x+Math.round(r*Math.cos(u)),
      y2 = y-Math.round(r*Math.sin(u));
  ctx.strokeStyle = 'rgb(99,99,99)';
  ctx.moveTo(x1,y1);
  ctx.lineTo(x2,y2);
  u+=Math.PI/6;
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.fillStyle = 'rgb(33,33,33)';
  ctx.fillText (''+(13-i),x1,y1); //а так вывести цифры по часовому кругу
  ctx.fill();
  ctx.closePath();
 }
 ctx.restore();
 //нарисовать стрелки:
 clockArms[1] += clockArms[2] / 60;
 clockArms[0] += clockArms[1] / 60;
 drawClockArm(ctx, x, y, clockArms[0] * 30, 2*r/2.5 - 15, 5, 'navy');
 drawClockArm(ctx, x, y, clockArms[1] * 6,  2*r/2.2 - 10, 3, 'darkgreen');
 drawClockArm(ctx, x, y, clockArms[2] * 6,  2*r/2.0 - 6,  2, 'darkred');
}
 
function drawClockArm(ctx, x,y, degrees, len, lineWidth, style) {
 ctx.save();
 ctx.lineWidth = lineWidth;
 ctx.lineCap = 'round';
 ctx.translate(x, y);
 ctx.rotate((degrees - 90) * Math.PI / 180);
 ctx.strokeStyle = style;
 ctx.beginPath();
 ctx.moveTo(-len / 10, 0);
 ctx.lineTo(len, 0);
 ctx.stroke();
 ctx.restore();
}
 
function initClock() {
 window.setInterval(updateClock, 333); //интервал обновления - треть секунды
}

onload = initClock;

</script>
<noscript>Извините, для работы приложения нужен включённый Javascript</noscript>
</div>

теги: графика javascript время

комментарии (0)

20.04.2016, 21:44; рейтинг: 4195

  свежие записипоиск по блогукомментироватьстатистика

Наверх Яндекс.Метрика
© PerS
вход