js实现简单圆盘时钟

2023年5月27日下午2:04 • JavaScript

下面让我来详细讲解一下如何用JavaScript实现一个简单的圆盘时钟。

一、准备工作

在实现之前，首先需要准备一些基础的知识和文件：

了解HTML5、CSS3和JavaScript基础知识；
引入jQuery库，在代码中使用jQuery封装好的方法来实现；
创建一个HTML文件，命名为index.html，并在其中添加一个canvas元素，用于绘制时钟。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS时钟</title>
  <style>
    canvas {
      background-color: #fff;
    }
  </style>
</head>
<body>
  <canvas id="clock" width="200" height="200"></canvas>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="clock.js"></script>
</body>
</html>

二、绘制时钟

创建一个clock.js文件，用于绘制时钟。在文件中我们需要写一些函数来绘制时钟。

2.1 绘制圆形

首先，我们需要可以绘制一个圆形的函数。

function drawCircle(ctx, x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
  ctx.closePath();
  ctx.fill();
}

函数drawCircle接受四个参数，分别是画布上下文、圆心的横坐标、纵坐标和半径。调用该函数，即可绘制一个圆形。

2.2 绘制时钟刻度

然后，我们想要在圆盘上绘制一些刻度。我们可以使用循环语句来实现。

function drawClockDial(ctx, x, y, radius) {
  for (var i = 1; i <= 12; i++) {
    var angle = i * Math.PI / 6;
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.moveTo(0, -radius);
    ctx.lineTo(0, -radius + 15);
    ctx.stroke();
    ctx.restore();
  }
}

函数drawClockDial接受四个参数，分别为画布上下文、圆心的横坐标、纵坐标和半径。函数内部使用循环语句来从1到12绘制12个刻度，每个刻度占用圆周的30度。使用Math.PI和数学函数来计算每个刻度的角度。在绘制每个刻度之前，我们需要使用ctx.save函数保存当前状态，使用ctx.restore函数回复上一个状态，以避免绘制下一个刻度时位置偏移。

2.3 绘制时针、分针和秒针

现在我们已经准备好了绘制时针、分针和秒针的函数。

function drawHands(ctx, x, y, radius, hours, minutes, seconds) {
  // 时针
  var hourAngle = (hours % 12) * Math.PI / 6 + minutes * Math.PI / 360 + seconds * Math.PI / 21600;
  drawLine(ctx, x, y, radius - 40, hourAngle, 8);

  // 分针
  var minuteAngle = minutes * Math.PI / 30 + seconds * Math.PI / 1800;
  drawLine(ctx, x, y, radius - 20, minuteAngle, 4);

  // 秒针
  var secondAngle = seconds * Math.PI / 30;
  drawLine(ctx, x, y, radius - 10, secondAngle, 1);
}

该函数接受七个参数，分别为画布上下文、圆心的横坐标、纵坐标、半径、时针、分针和秒针。函数内部使用三个辅助函数：drawLine绘制线条、drawCircle绘制圆形和toRad将角度转化为弧度。

function drawLine(ctx, x, y, length, angle, lineWidth) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.lineWidth = lineWidth;
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.restore();
}

function toRad(degrees) {
  return degrees * Math.PI / 180;
}

三、完整代码演示

下面是完整的代码示例：

$(function() {
  var canvas = document.getElementById('clock');
  var ctx = canvas.getContext('2d');

  // 绘制时钟圆形
  drawCircle(ctx, 100, 100, 90);

  // 绘制时钟刻度
  drawClockDial(ctx, 100, 100, 75);

  // 绘制时针、分针和秒针
  setInterval(function() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    drawHands(ctx, 100, 100, 90, hours, minutes, seconds);
  }, 1000);

  // 绘制圆形
  function drawCircle(ctx, x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
  }

  // 绘制时钟刻度
  function drawClockDial(ctx, x, y, radius) {
    for (var i = 1; i <= 12; i++) {
      var angle = i * Math.PI / 6;
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(angle);
      ctx.beginPath();
      ctx.moveTo(0, -radius);
      ctx.lineTo(0, -radius + 15);
      ctx.stroke();
      ctx.restore();
    }
  }

  // 绘制线条
  function drawLine(ctx, x, y, length, angle, lineWidth) {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle);
    ctx.lineWidth = lineWidth;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.restore();
  }

  // 绘制时针、分针和秒针
  function drawHands(ctx, x, y, radius, hours, minutes, seconds) {
    // 时针
    var hourAngle = (hours % 12) * Math.PI / 6 + minutes * Math.PI / 360 + seconds * Math.PI / 21600;
    drawLine(ctx, x, y, radius - 40, hourAngle, 8);

    // 分针
    var minuteAngle = minutes * Math.PI / 30 + seconds * Math.PI / 1800;
    drawLine(ctx, x, y, radius - 20, minuteAngle, 4);

    // 秒针
    var secondAngle = seconds * Math.PI / 30;
    drawLine(ctx, x, y, radius - 10, secondAngle, 1);
  }

  // 角度转弧度
  function toRad(degrees) {
    return degrees * Math.PI / 180;
  }
});

运行以上代码，你就可以在页面上看到一个简单的圆盘时钟。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现简单圆盘时钟 - Python技术站