使用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 相关文章推荐
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
node.js操作mysql简单实例
May 25 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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
多重?l件?合查?(二)
2006/10/09 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PDO::query讲解
2019/01/29 PHP
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
vue之延时刷新实例
2019/11/14 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
python模拟Django框架实例
2016/05/17 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python学生管理系统代码实现
2020/04/05 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
django 信号调度机制详解
2019/07/19 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
2016党员发展对象培训心得体会
2016/01/08 职场文书
创业计划书之酒厂
2019/10/14 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript