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程序设计有所帮助。

Javascript 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
浅析JS异步加载进度条
May 05 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
浅析vue-router原理
Oct 19 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
ES6的解构赋值实例详解
May 06 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
You might like
关于文本留言本的分页代码
2006/10/09 PHP
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
python将数据插入数据库的代码分享
2020/08/16 Python
利用python爬取有道词典的方法
2020/12/08 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
会计大学生职业生涯规划书范文
2014/01/13 职场文书
党员个人党性分析材料
2014/12/18 职场文书
团代会闭幕词
2015/01/28 职场文书
兵马俑的导游词
2015/02/02 职场文书
车间质检员岗位职责
2015/04/08 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
Java字符串逆序方法详情
2022/03/21 Java/Android