javascript+HTML5 canvas绘制时钟功能示例


Posted in Javascript onMay 15, 2019

本文实例讲述了javascript+HTML5 canvas绘制时钟功能。分享给大家供大家参考,具体如下:

效果如下:

javascript+HTML5 canvas绘制时钟功能示例

代码:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>3water.com canvas绘制时钟</title>
 <style>
  div{text-align:center;margin-top:250px;}
 </style>
</head>
<body>
<div>
 <canvas id="clock" width="300px" height="300px"></canvas>
</div>
<script>
 var dom=document.getElementById("clock");
 var ctx=dom.getContext("2d");
 var width=ctx.canvas.width;
 var height=ctx.canvas.height;
 var r=width/2;
 var rem=width/200;
 function drawBackground(){
  ctx.save();
  ctx.translate(r,r);//重新定义圆点到中心
  ctx.beginPath();
  ctx.lineWidth=10*rem;
  ctx.arc(0,0,r-5*rem,0,Math.PI*2,false);//圆点坐标,起始角0,结束角2π,顺时针
  ctx.stroke();
  var hourNum=[3,4,5,6,7,8,9,10,11,12,1,2];//数组存小时数
  ctx.font="18px Arial";
  ctx.textAlign="center";
  ctx.textBaseline="middle";
  hourNum.forEach(function (num,i) {
   var rad=2*Math.PI/12*i;//弧度
   var x=(r-30*rem)*Math.cos(rad);
   var y=(r-30*rem)*Math.sin(rad);
   ctx.fillText(num,x,y);
  });
  for(var i=0;i<60;i++){//画圆点
   var rad=2*Math.PI/60*i;
   var x=(r-18*rem)*Math.cos(rad);
   var y=(r-18*rem)*Math.sin(rad);
   ctx.beginPath();
   if(i%5==0){
    ctx.fillStyle="#000";
    ctx.arc(x,y,2,0,Math.PI*2,false);
   }
   else{
    ctx.fillStyle="#ccc";
    ctx.arc(x,y,2,0,Math.PI*2,false);
   }
   ctx.fill();
  }
  ctx.closePath();
 }
 function drawHour(hour,minute){//时针
  ctx.save();
  ctx.beginPath();
  var rad=2*Math.PI/12*hour;
  var mrad=2*Math.PI/12/60*minute;
  ctx.rotate(rad+mrad);
  ctx.lineWidth=6*rem;
  ctx.moveTo(0,10*rem);
  ctx.lineTo(0,-r/2);
  ctx.lineCap="round";
  ctx.stroke();
  ctx.restore();
 }
 function drawMinute(minute,second){//分针
  ctx.save();
  ctx.beginPath();
  var rad=2*Math.PI/60*minute;
  var srad=2*Math.PI/60/60*second;
  ctx.rotate(rad+srad);
  ctx.lineWidth=3*rem;
  ctx.moveTo(0,10*rem);
  ctx.lineTo(0,-r+30*rem);
  ctx.lineCap="round";
  ctx.stroke();
  ctx.restore();
 }
 function drawSecond(second){//秒针
  ctx.save();
  ctx.beginPath();
  ctx.fillStyle="#c14543";
  var rad=2*Math.PI/60*second;
  ctx.rotate(rad);
  ctx.moveTo(-2*rem,20*rem);
  ctx.lineTo(2*rem,20*rem);
  ctx.lineTo(1*rem,-r+18*rem);
  ctx.lineTo(-1*rem,-r+18*rem);
  ctx.fill();
  ctx.restore();
 }
 function drawDot(){//画中心圆圈
  ctx.beginPath();
  ctx.fillStyle="#fff";
  ctx.arc(0,0,3*rem,0,2*Math.PI,false);
  ctx.fill();
 }
 function draw(){
  ctx.clearRect(0,0,width,height);
  var now=new Date();
  var hour=now.getHours();
  var minute=now.getMinutes();
  var second=now.getSeconds();
  drawBackground();//背景
  drawHour(hour,minute);//小时
  drawMinute(minute,second);//分钟
  drawSecond(second);//秒钟
  drawDot();//中心圆点
  ctx.restore();
 }
 setInterval(draw,1000);
</script>
</body>
</html>

其中的rem值是为了使canvas画布大小变化时时钟的样式能够保持

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

Javascript 相关文章推荐
理解javascript定时器中的单线程
Feb 23 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
jquery图片放大镜效果
Jun 23 jQuery
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
详解小程序用户登录状态检查与更新实例
May 15 #Javascript
基于vue如何发布一个npm包的方法步骤
May 15 #Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 #Javascript
JavaScript页面倒计时功能完整示例
May 15 #Javascript
vue组件间通信六种方式(总结篇)
May 15 #Javascript
JS正则表达式封装与使用操作示例
May 15 #Javascript
微信小程序实现授权登录
May 15 #Javascript
You might like
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
详解JS模块导入导出
2017/12/20 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
Python深入学习之内存管理
2014/08/31 Python
python中pycurl库的用法实例
2014/09/30 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
python自动点赞功能的实现思路
2020/02/26 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
运动会广播稿200米
2014/01/27 职场文书
教师师德反思材料
2014/02/15 职场文书
会走路的树教学反思
2014/02/20 职场文书
生日庆典策划方案
2014/06/02 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
个人年终总结开头
2015/03/06 职场文书
2015年推普周活动总结
2015/03/27 职场文书
秋菊打官司观后感
2015/06/03 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python