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加解密 脚本解密
Feb 22 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
js判断节假日实例代码
Dec 27 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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
一个php作的文本留言本的例子(二)
2006/10/09 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
bat和python批量重命名文件的实现代码
2016/05/19 Python
python算法表示概念扫盲教程
2017/04/13 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
校长就职演讲稿
2014/01/06 职场文书
护士毕业生自荐信
2014/02/07 职场文书
主管竞聘书范文
2014/03/31 职场文书
给下属加薪申请报告
2015/05/15 职场文书
单位考核鉴定意见
2015/06/05 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
php字符串倒叙
2021/04/01 PHP
详解nginx location指令
2022/01/18 Servers