首页
所有分类
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 相关文章推荐
jquery异步循环获取功能实现代码
Sep 19 Javascript
javascript针对DOM的应用实例（一）
Apr 15 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
基于vue实现圆形菜单栏组件
Jul 05 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
77A(2) ICF-2010(1) 收信机(3) BOSE(2) 春雷3P7(1) MOTOROLA(1) 耳机(1) 音箱(1) 单管机(1) 晶体管(2)
You might like
PHP Array交叉表实现代码
2010/08/05 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
js获取变量
2006/08/24 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python利用opencv保存、播放视频
2020/11/02 Python
python3中for循环踩过的坑记录
2020/12/14 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
abstract 可以和 virtual 一起使用吗？可以和 override 一起使用吗？
2012/10/15 面试题
大学生活动策划方案
2014/02/10 职场文书
学雷锋日活动总结
2015/02/06 职场文书
会议室管理制度范本
2015/08/06 职场文书
如何写好一份优秀的工作总结？
2019/06/21 职场文书
如何写好开幕词？
2019/06/24 职场文书