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 相关文章推荐
基于jQuery的前端数据通用验证库
Aug 08 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
详解React中setState回调函数
Jun 14 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
javascript this指向相关问题及改变方法
Nov 19 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
构建简单的Webmail系统
2006/10/09 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
Python实现的最近最少使用算法
2015/07/10 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
简单了解python代码优化小技巧
2019/07/08 Python
Python八皇后问题解答过程详解
2019/07/29 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Python之字典添加元素的几种方法
2020/09/30 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
数控个人求职信范文
2014/02/03 职场文书
师说教学反思
2014/02/07 职场文书
车辆转让协议书
2014/04/15 职场文书
三严三实学习心得体会
2014/10/13 职场文书
成人成长感言如何写?
2019/08/16 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript