使用js和canvas实现时钟效果


Posted in Javascript onSeptember 08, 2020

使用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时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
js 文件引入实现代码
Apr 23 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
javascript使用canvas实现饼状图效果
Sep 08 #Javascript
vue配置多代理服务接口地址操作
Sep 08 #Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 #Javascript
JS删除对象中某一属性案例详解
Sep 08 #Javascript
vue全局使用axios的操作
Sep 08 #Javascript
Vue自定义多选组件使用详解
Sep 08 #Javascript
vue项目中微信登录的实现操作
Sep 08 #Javascript
You might like
php中去除所有js,html,css代码
2010/10/12 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
js函数调用的方式
2014/05/06 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
使用Python快速制作可视化报表的方法
2019/02/03 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
使用K.function()调试keras操作
2020/06/17 Python
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
店长职务说明书
2014/02/04 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
平安建设实施方案
2014/03/19 职场文书
初中家长寄语
2014/04/02 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
个人典型事迹材料
2014/12/30 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技
Redis过期数据是否会被立马删除
2022/07/23 Redis