首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS+Canvas绘制时钟效果

Posted in Javascript onAugust 20, 2020

本文实例为大家分享了使用canvas绘制时钟的具体代码，供大家参考，具体内容如下

1. clock.html

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Description" content="">
 <title>canvas时钟</title>
 </head>
 <body>
 <canvas id="canvas" width="300" height="300"></canvas>
 <script>
  var canvas=document.getElementById("canvas");
  var context=canvas.getContext('2d');
  //draw();
  function draw(){
   //得到当前系统的时分秒
   var now=new Date();
   var sec=now.getSeconds();
   var min=now.getMinutes();
   var hour=now.getHours();
   hour>=12&&(hour=hour-12);
 
    
   var radius = Math.min(canvas.width/2,canvas.height/2);
   //初始化画布
   context.save();
   context.clearRect(0,0,canvas.width,canvas.height);
    context.translate(canvas.width/2,canvas.height/2); 
   context.rotate(-Math.PI/2);
   context.save();
  
   //表框
    
 
   //小时刻度
   context.strokeStyle="black";
   context.fillStyle="black";
   context.lineWidth=3;
   context.lineCap="round";
   context.beginPath();
   for(var i=0;i<12;i++){
    context.rotate(Math.PI/6);
    context.moveTo(radius-30,0);
    context.lineTo(radius-10,0);
 
   }
   context.stroke();
   context.restore();
   context.save();
 
   //分钟刻度
   context.lineWidth=2;
   context.beginPath();
   for(var i=0;i<60;i++){
    if(!i%5==0){
    context.moveTo(radius-15,0);
    context.lineTo(radius-10,0);
    }
    context.rotate(Math.PI/30);
   }
   context.stroke();
   context.restore();
   context.save();
 
   //画上时针
 
    context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);
    context.lineWidth=6;
    context.beginPath();
    context.moveTo(-10,0);
    context.lineTo(radius*0.5,0);
    context.stroke();
   context.restore();
   context.save();
 
    context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
  context.strokeStyle="#29A8DE";
  context.lineWidth=4;
  context.lineCap="butt";
  context.beginPath();
  context.moveTo(-20,0);
  context.lineTo(radius*0.7,0);
  context.stroke();
  context.restore();
  context.save();
 
  context.rotate(sec*Math.PI/30);
  context.strokeStyle="red";
  context.lineWidth=2;
  context.lineCap="butt";
  context.beginPath();
  context.moveTo(-30,0);
  context.lineTo(radius*0.9,0);
  context.stroke();
  context.restore();
  context.save();
 
   context.lineWidth=4;
    context.strokeStyle="gray";
   context.beginPath();
     context.arc(0,0,radius,0,Math.PI*2,true);
   context.stroke();
   context.restore();
 
 
   context.restore();
  }
 
  window.onload=function(){
   setInterval(draw,1000)
  }
 </script>
 </body>
</html>

2. JavaScript代码

<script>
  var canvas=document.getElementById("canvas");
  var context=canvas.getContext('2d');
  //draw();
  function draw(){
   //得到当前系统的时分秒
   var now=new Date();
   var sec=now.getSeconds();
   var min=now.getMinutes();
   var hour=now.getHours();
   hour>=12&&(hour=hour-12);
 
    
   var radius = Math.min(canvas.width/2,canvas.height/2);
   //初始化画布
   context.save();
   context.clearRect(0,0,canvas.width,canvas.height);
    context.translate(canvas.width/2,canvas.height/2); 
   context.rotate(-Math.PI/2);
   context.save();
  
   //表框
    
 
   //小时刻度
   context.strokeStyle="black";
   context.fillStyle="black";
   context.lineWidth=3;
   context.lineCap="round";
   context.beginPath();
   for(var i=0;i<12;i++){
    context.rotate(Math.PI/6);
    context.moveTo(radius-30,0);
    context.lineTo(radius-10,0);
 
   }
   context.stroke();
   context.restore();
   context.save();
 
   //分钟刻度
   context.lineWidth=2;
   context.beginPath();
   for(var i=0;i<60;i++){
    if(!i%5==0){
    context.moveTo(radius-15,0);
    context.lineTo(radius-10,0);
    }
    context.rotate(Math.PI/30);
   }
   context.stroke();
   context.restore();
   context.save();
 
   //画上时针
 
    context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);
    context.lineWidth=6;
    context.beginPath();
    context.moveTo(-10,0);
    context.lineTo(radius*0.5,0);
    context.stroke();
   context.restore();
   context.save();
 
    context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
  context.strokeStyle="#29A8DE";
  context.lineWidth=4;
  context.lineCap="butt";
  context.beginPath();
  context.moveTo(-20,0);
  context.lineTo(radius*0.7,0);
  context.stroke();
  context.restore();
  context.save();
 
  context.rotate(sec*Math.PI/30);
  context.strokeStyle="red";
  context.lineWidth=2;
  context.lineCap="butt";
  context.beginPath();
  context.moveTo(-30,0);
  context.lineTo(radius*0.9,0);
  context.stroke();
  context.restore();
  context.save();
 
   context.lineWidth=4;
    context.strokeStyle="gray";
   context.beginPath();
     context.arc(0,0,radius,0,Math.PI*2,true);
   context.stroke();
   context.restore();
 
 
   context.restore();
  }
 
  window.onload=function(){
   setInterval(draw,1000)
  }
 </script>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

JS+Canvas绘制时钟效果

- Author -

tutugo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
domReady的实现案例
Nov 23 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 #Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 #Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 #Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 #Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 #Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 #Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 #Javascript
Spring(9) PostMapping(1) 字符串(2) Seaborn(1) yolo3(1) tensorflow(2) 内存泄露(1) Xception(1) Inception(2) ResNet50(1)
You might like
2020年4月放送决定！第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开！
2020/03/06 日漫
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP Session机制简介及用法
2014/08/19 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
python提取字典key列表的方法
2015/07/11 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python中一些深不见底的“坑”
2019/06/12 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
医学类导师推荐信范文
2013/11/19 职场文书
六一节目主持词
2014/04/01 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
社区灵活就业证明
2014/11/03 职场文书
小学班主任评语
2014/12/29 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
MySQL 如何限制一张表的记录数
2021/09/14 MySQL