javascript - 多个 Javascript 时钟

Question

我遵循了构建 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);
}

我尝试将生成 ctx 和 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>

上面的代码导致没有时钟被绘制。我如何才能扩展此代码以适应多个时钟？

(最后的游戏是为不同的时区设置多个时钟，以防产生差异)

Answer 1

您已尝试过以下方法:

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 。所以在你的情况下你需要的是两张 Canvas

<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);

无限可能，祝你好运!