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

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

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

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

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

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

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

Полный исходник приложения приводится ниже. Он не содержит обрамления HTML, а код реализован в виде функции-замыкания, так что, в принципе готов к встраиванию в любую страницу. Возможно, только придётся переименовать канву из clock во что-нибудь другое.

<div align="center">
 <canvas id="clock" width="256" height="256">Извините, ваш браузер не поддерживает тег canvas</canvas>
</div>
<script type="text/javascript">
function analogClock () {
 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)-2);
  ctx.beginPath(); 
  ctx.arc(x,y,r,0,2*Math.PI,true);
  //нарисовать градиент на циферблате:
  var grd=ctx.createRadialGradient(x,y,0,x,y,r);
  grd.addColorStop(0,'#EEDDEE');
  grd.addColorStop(0.5,'#CCEECC');
  grd.addColorStop(1,'#99FF99');
  ctx.fillStyle = grd;
  ctx.fill();
  ctx.lineWidth = 1;
  ctx.strokeStyle = '#C0C0C0';
  ctx.stroke();
  ctx.closePath();
  //нарисовать метки циферблата и цифры:
  ctx.save();
  ctx.textBaseline = "middle";
  ctx.textAlign = 'center';
  ctx.shadowColor = '#800000';
  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 hour = 1;
  for (var i=2; i<62; i++) {
   ctx.beginPath();
   var r1=r-delta;
   if (i%5!=2) r1+=delta/2;
   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 = '#606060';
   ctx.moveTo(x1,y1);
   ctx.lineTo(x2,y2); //Вывести деление
   u+=Math.PI/30;
   ctx.stroke();
   ctx.closePath();
   if (i%5==2) {
    ctx.fillStyle = '#202020';
    ctx.fillText (''+(13-hour),x1,y1); //а так вывести цифры по часовому кругу
    hour++;
    ctx.fill();
   }
  }
  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, '#000080');
  drawClockArm(ctx, x, y, clockArms[1] * 6,  2*r/2.2 - 10, 3, '#008000');
  drawClockArm(ctx, x, y, clockArms[2] * 6,  2*r/2.0 - 6,  2, '#800000');
 }
 
 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.closePath();
  ctx.restore();
 }
 
 function initClock() {
  window.setInterval(updateClock, 500); //интервал обновления - полсекунды
 }

 initClock();
}

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

20.04.2016, 21:44 [10508 просмотров]


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

К этой статье пока нет комментариев, Ваш будет первым