使用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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
js刷新页面location.reload()用法详解
Dec 09 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实现的封装验证码类详解
2013/06/18 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
jQuery表单选择器用法详解
2019/08/22 jQuery
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Python 初始化多维数组代码
2008/09/06 Python
python处理二进制数据的方法
2015/06/03 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python如何调用字典的key
2020/05/25 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
艺术学院毕业生自我评价
2014/03/02 职场文书
酒店开业策划方案
2014/06/02 职场文书
运动会标语
2014/06/21 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
举起手来观后感
2015/06/09 职场文书
新学期开学寄语2016
2015/12/04 职场文书