首页
所有分类
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 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 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
观后感(479) 慰问信(53) 通知(159) HAM-2000(1) 西索(1) 波段(1) 文书(291) AngularJS(2) 实用文书(952) 申请书(21)
You might like
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
JavaScript事件学习小结（三）js事件对象
2016/06/09 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
详解package.json版本号规则
2019/08/01 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
Python SQLAlchemy基本操作和常用技巧（包含大量实例,非常好）
2014/05/06 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
css sprite简单实例
2016/05/23 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
DataList 能否分页，请问如何实现？
2015/05/03 面试题
模具专业毕业推荐信
2014/03/08 职场文书
cf收人广告词大全
2014/03/14 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
销售类求职信
2014/06/13 职场文书
班子四风对照检查材料
2014/08/21 职场文书
践行三严三实心得体会
2014/10/13 职场文书
毕业设计致谢语
2015/05/14 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android