Несколько часов Javascript - PullRequest
Новая
       4

Несколько часов Javascript

1 голос
/ 05 октября 2019

Я следовал руководству по созданию аналоговых часов JS, и теперь я хотел бы создать идентичные вторые часы на странице для экспериментов.

Когда я пытался добавить вторые часы, он перезаписывалпервые часы - я полагаю, это потому, что переменные ctx и radius установлены глобально.

Рабочий пример: 

var canvas = document.getElementById("cambs_clock");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90;

//drawClock();
setInterval(drawClock, 1000);

function drawClock() 
{
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

Я попытался повернуть блок кода, который генерирует *Переменные 1010 * и radius в функцию и добавление параметров в функцию drawClock, но это не приводит к отображению часов: 

function setupClock(clock)
{
    var canvas = document.getElementById("cambs_clock");
    var ctx = canvas.getContext("2d");
    var radius = canvas.height / 2;
    ctx.translate(radius, radius);
    radius = radius * 0.90;
    setInterval(drawClock(ctx, radius), 1000);
}

//drawClock();
//setInterval(drawClock, 1000);
setupClock();

function drawClock(ctx,radius) 
{
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;

  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();

  grad = ctx.createRadialGradient(0, 0 ,radius * 0.95, 0, 0, radius * 1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'black');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.05;
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius * 0.15 + "px arial";
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius * 0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  //hour
  hour = hour%12;
  hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
  drawHand(ctx, hour, radius*0.5, radius*0.07);
  //minute
  minute = (minute*Math.PI/30)+(second*Math.PI/(30*60));
  drawHand(ctx, minute, radius*0.8, radius*0.07);
  // second
  second = (second*Math.PI/30);
  drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0,0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-pos);
}
</script>

Приведенный выше код не приводит к отображению часов. Как я смогу расширить этот код для размещения нескольких часов?

(Конечная игра - иметь несколько часов для разных часовых поясов на случай, если что-то изменится)

Ответы [ 2 ]

2 голосов
/ 05 октября 2019

Вы пробовали следующее: 

function setupClock(clock)
{
    var canvas = document.getElementById("cambs_clock");
    var ctx = canvas.getContext("2d");
    var radius = canvas.height / 2;
    ctx.translate(radius, radius);
    radius = radius * 0.90;
    setInterval(() => drawClock(ctx, radius), 1000);
}

setupClock();

Обратите внимание, что у этой функции есть аргумент clock, который не используется. Кроме того, с document.getElementById("cambs_clock"); вы всегда нацеливаетесь на один и тот же холст. Так что в вашем случае вам нужны два холста, такие как 

<canvas id="clock1"></canvas>
<canvas id="clock2"></canvas>

И следующий скрипт 

function setupClock(clock)
{
    var canvas = document.getElementById(clock);
    var ctx = canvas.getContext("2d");
    var radius = canvas.height / 2;
    ctx.translate(radius, radius);
    radius = radius * 0.90;
    setInterval(drawClock(ctx, radius), 1000);
}

setupClock('clock1');
setupClock('clock2');

Вы можете передать радиус и аргумент, если хотите: 

function setupClock(clock, radius) { ... }

setupClock('clock2', 20);

Бесконечные возможности, удачи!

0 голосов
/ 05 октября 2019

Изменить 

 setInterval(drawClock(ctx, radius), 1000);

на 

  setInterval(() => {
       drawClock(ctx, radius);
  }, 1000);
...