JavaScript canvas动画实现时钟效果


Posted in Javascript onFebruary 10, 2020

本文实例为大家分享了canvas动画实现时钟效果的具体代码,供大家参考,具体内容如下

JavaScript canvas动画实现时钟效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>时钟特效</title>
</head>
<body>
  <canvas width="150" height="150" id="canvas"></canvas>
</body>
</html>
<script>
  clock();// 显示
  setInterval(clock,1000);// 每一秒重绘一次,达到转动效果
  function clock(){
    var now = new Date();// 得到当前日期与时间
    var second = now.getSeconds(),
      min = now.getMinutes(),
      hour = now.getHours();// 得到时分秒
      hour = hour > 12?hour-12:hour;
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,150,150);// 初始化画布
    ctx.save();
    ctx.translate(75,75);// 平移坐标原点
    ctx.scale(0.4,0.4);//缩放效果
    ctx.rotate(-Math.PI/2);// 将x轴旋转-90
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 8;
    ctx.lineCap = 'round';

    // 显示时针刻度
    ctx.save();
    ctx.beginPath();
    for(var i = 0;i<12;i++)
    {
      ctx.rotate(Math.PI/6);
      ctx.moveTo(100,0);
      ctx.lineTo(120,0);
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();// 恢复
    ctx.save();
    
    // 显示秒针刻度
    ctx.beginPath();
    ctx.lineWidth = 5;
    for(var i = 0;i < 60; i++)
    {
      if(i % 5 != 0)
      {
        ctx.moveTo(117,0);
        ctx.lineTo(120,0);
      }
      ctx.rotate(Math.PI/30);// 转6度
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();// 恢复
    ctx.save();

    // 绘制时针
    ctx.beginPath();
    ctx.rotate((Math.PI / 6)*hour + (Math.PI/360)*min + (Math.PI /21600)*second)//时针当前指向的位置
    ctx.lineWidth = 14;
    ctx.moveTo(-20,0);
    ctx.lineTo(75,0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//恢复
    ctx.save();

    // 绘制分针
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 10;
    ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*second);// 分针当前的位置
    ctx.moveTo(-28,0);
    ctx.lineTo(102,0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//恢复
    ctx.save();


    // 绘制秒针
    ctx.beginPath();
    ctx.rotate(Math.PI/30*second);
    ctx.strokeStyle = '#D40000';
    ctx.lineWidth = 6;
    ctx.moveTo(-30,0);
    ctx.lineTo(83,0);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();//恢复
    ctx.save();

    //绘制表框
    ctx.beginPath();
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#325Fa2';
    ctx.arc(0,0,142,0,Math.PI*2,true);//半径142
    ctx.stroke();
    ctx.closePath();
    ctx.restore()//恢复
    ctx.restore()//恢复


  }
</script>

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

Javascript 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
vue2.x 对象劫持的原理实现
Apr 19 Javascript
js实现简单选项卡制作
Aug 05 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 #Javascript
Vue数字输入框组件使用方法详解
Feb 10 #Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 #Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 #Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 #Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 #Javascript
js实现登录拖拽窗口
Feb 10 #Javascript
You might like
mysql 性能的检查和优化方法
2009/06/21 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
BootStrap中
2016/12/10 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python虚拟环境完美部署教程
2019/08/06 Python
python logging模块的使用详解
2020/10/23 Python
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
亲属关系公证书
2014/04/08 职场文书
医学求职自荐信
2014/06/21 职场文书
中学生自我评价2015
2015/03/03 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript