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 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
纯JS实现轮播图
Feb 22 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
PHP Token(令牌)设计
2008/03/15 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php跨服务器访问方法小结
2015/05/12 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
nodeJS微信分享
2017/12/20 NodeJs
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
深入了解Python数据类型之列表
2016/06/24 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python实现简易学生信息管理系统
2020/04/05 Python
经典c++面试题五
2014/12/17 面试题
工作态度检讨书
2014/02/11 职场文书
教学质量评估实施方案
2014/03/17 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
家电创业计划书
2019/08/05 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android