使用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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
js实现AI五子棋人机大战
May 28 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 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中Smarty模板初体验
2011/08/08 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python超时重新请求解决方案
2019/10/21 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
信用社实习人员自我鉴定
2013/09/20 职场文书
规范化管理年活动总结
2014/08/29 职场文书
期末复习计划
2015/01/19 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers