脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js canvas时钟

使用js和canvas实现时钟效果

 更新时间：2020年09月08日 15:15:37   作者：HaiRong_21  
这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用js和canvas写一个时钟，供大家参考，具体内容如下

<!DOCTYPE html>`
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id='canvas' width='600' height='600' style="border: 1px solid red;"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector("#canvas");
    let ctx = canvas.getContext("2d");
    let deg = Math.PI / 180;

    let HourR = 100;
    let MinutesR = 135;
    let SecondsR = 170;
    setInterval(function () {

      canvas.width = canvas.width;
      ctx.arc(300, 300, 200, 0, Math.PI * 2)
      ctx.fillStyle = 'rgba(10,100,30,0.2)'
      ctx.strokeStyle = 'red'
      //获取当前时间
      let dt = new Date()
      let Hour = dt.getHours()
      let Minutes = dt.getMinutes()
      let Seconds = dt.getSeconds()
      //时钟
      ctx.moveTo(300, 300);
      let xx = HourR * (Math.sin(Hour * 30 * deg))
      let yy = HourR * (Math.cos(Hour * 30 * deg))
      ctx.lineTo((300 + xx), (300 - yy))
      //分钟和秒钟
      function move(time, R) {
        ctx.moveTo(300, 300);
        xx = R * (Math.sin(time * 6 * deg))
        yy = R * (Math.cos(time * 6 * deg))
        ctx.lineTo((300 + xx), (300 - yy))
      }
      //小时指针
      for (let m = 0; m < 12; m++) {
        let xx = 190 * (Math.sin(m * 30 * deg))
        let yy = 190 * (Math.cos(m * 30 * deg))
        let xx1 = 200 * (Math.sin(m * 30 * deg))
        let yy1 = 200 * (Math.cos(m * 30 * deg))
        ctx.moveTo((300 + xx), (300 - yy));
        ctx.lineTo((300 + xx1), (300 - yy1))
      }

      move(Seconds, SecondsR)
      move(Minutes, MinutesR)
      ctx.fill()
      ctx.stroke()
    }, 1000)


  </script>
</body>

</html>

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 浅谈Cookie的生命周期问题

    浅谈Cookie的生命周期问题

    下面小编就为大家带来一篇浅谈Cookie的生命周期问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript学习笔记之数组的增、删、改、查

    JavaScript学习笔记之数组的增、删、改、查

    这篇文章主要介绍了JavaScript学习笔记之数组的增、删、改、查的相关资料,需要的朋友可以参考下
    2016-03-03
  • js中switch case循环实例代码

    js中switch case循环实例代码

    这篇文章主要介绍了js中switch case循环实例代码，有需要的朋友可以参考一下
    2013-12-12
  • javascript控制层显示或隐藏的方法

    javascript控制层显示或隐藏的方法

    这篇文章主要介绍了javascript控制层显示或隐藏的方法,涉及javascript操作页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • 深入学习JavaScript ES8中的函数式编程

    深入学习JavaScript ES8中的函数式编程

    函数式编程已经成为现代JavaScript开发中的一种主要范式,它提供了一种更清晰、更模块化、更可维护的代码编写方式,本文将深入探讨ES8中的一些关键特性,并演示如何使用这些特性进行函数式编程实践,有需要的可以参考下
    2023-09-09
  • 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术

    不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术

    注明:以下方法都经过实例和开发的长期验证,其实这些技术早就有,今天只不过自己归纳一下
    2008-09-09
  • javascript实现拍照功能详细示例代码

    javascript实现拍照功能详细示例代码

    这篇文章主要给大家介绍了关于javascript实现拍照功能的相关资料, 最近做项目,遇到一个正常但又少见的需求之拍照,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-07-07
  • 微信小程序实现动态验证码

    微信小程序实现动态验证码

    这篇文章主要为大家详细介绍了微信小程序实现动态验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JS版微信6.0分享接口用法分析

    JS版微信6.0分享接口用法分析

    这篇文章主要介绍了JS版微信6.0分享接口用法,结合实例形式分析了JS版微信6.0分享功能原理、接口调用方法与相关使用注意事项,需要的朋友可以参考下
    2016-10-10
  • 关于function类中定义变量this的简单说明

    关于function类中定义变量this的简单说明

    下面小编就为大家带来一篇关于function类中定义变量this的简单说明。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论