js实现简单圆盘时钟

下面让我来详细讲解一下如何用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技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Js基础学习资料

    Js基础学习资料完整攻略 目录 学习网站推荐 学习书籍推荐 个人建议 学习网站推荐 以下是一些适合 Js 初学者的网站,这些网站通常包括了从 Js 基础语法到高阶应用的全面内容。 MDN Web Docs w3schools JavaScript.info 学习书籍推荐 以下是一些 Js 学习者可以选择的经典书籍。 《JavaScript 高级程序设计》([…

    JavaScript 2023年5月18日
    00
  • jquery validate和jquery form 插件组合实现验证表单后AJAX提交

    下面我将为您详细讲解如何使用jquery validate和jquery form插件完成验证表单后的AJAX提交。 步骤一:引入jQuery及相关插件 首先,在页面中引入jQuery和相关插件文件,这里需要演示的插件是jquery validate和jquery form,引用代码如下: <script src="https://code.…

    JavaScript 2023年6月10日
    00
  • JS实现登录页面记住密码和enter键登录方法推荐

    下面是JS实现登录页面记住密码和enter键登录方法的攻略: 实现登录页面记住密码功能 通过 localStorage 存储用户名和密码 // 存储用户名和密码到 localStorage 中 localStorage.setItem(‘username’, ‘yourUsername’); localStorage.setItem(‘password’, …

    JavaScript 2023年6月11日
    00
  • JavaScript中的闭包(Closure)详细介绍

    首先,我们需要了解什么是闭包(Closure)。闭包是指函数可以保存并使用函数外部变量的能力,这些变量在函数定义时是存在于函数外部的,当函数执行时可以访问这些变量。简单来说,闭包就是函数与其引用外部变量之间的关系。 如何创建一个闭包 我们可以通过以下示例来了解如何创建一个闭包: function outer() { let a = 10; function …

    JavaScript 2023年6月10日
    00
  • JavaScript数组前面插入元素的方法

    JavaScript 数组前面插入元素有多种方法,下面详细讲解一下。 使用unshift()方法 unshift() 方法可向数组的开头添加一个或多个元素,并返回新的长度。语法如下: array.unshift(element1, …, elementN) 例如,我们有一个数组 fruits,它包含了 “Banana” 和 “Orange” 两个元素: …

    JavaScript 2023年5月27日
    00
  • JavaScript之引用类型介绍

    下面是详细讲解“JavaScript之引用类型介绍”的完整攻略。 引用类型介绍 在JavaScript中,除了基本类型(number、string、boolean、null、undefined)之外,还有一类特殊的类型,被称为引用类型。引用类型是由多个值组成的对象。 对象 对象是引用类型的最基本类型。对象是由多个键值对组成的属性集合。 创建对象有两种方式,一…

    JavaScript 2023年5月19日
    00
  • 举例讲解JavaScript中关于对象操作的相关知识

    下面我将详细讲解JavaScript中关于对象操作的相关知识: 对象的定义 JavaScript中对象是一种数据类型,它是一组无序的属性和方法的集合。JavaScript对象是键值对的集合,其中键是字符串类型的属性名,值可以是任何JavaScript的数据类型。对象可以通过字面量或者构造函数的方式进行创建。 对象的字面量创建 var person = { f…

    JavaScript 2023年5月27日
    00
  • 详解JavaScript严格模式的使用方法

    详解JavaScript严格模式的使用方法 JavaScript的严格模式(Strict Mode)是在ECMAScript 5标准中添加的一项新功能。它提供了一种限制JavaScript使用错误的新方法,并帮助开发人员编写更加安全、规范的代码。在这篇文章中,我们将详细讲解JavaScript严格模式的使用方法。 开启严格模式 在ECMAScript 5中,…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部