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函数添加了参数，但是却没有产生任何时钟：< / p>

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

无尽的可能性，祝你好运！

Answer 2

更改

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

到

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

多个Javascript时钟

2 个答案: