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 特殊字符
Apr 05 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
查看Django和flask版本的方法
2018/05/14 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
会计自我鉴定范文
2013/10/06 职场文书
政治学求职信
2014/06/03 职场文书
成绩单评语
2015/01/04 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
Python中的 Set 与 dict
2022/03/13 Python