JavaScript Canvas绘制圆形时钟效果


Posted in Javascript onAugust 20, 2020

本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下

<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
 canvas{ 
  display: block; 
  margin: 0 auto; 
  background-color: #fdffad; 
  border: 1px solid #000; 
 } 
 </style> 
 <script type="text/javascript"> 
 
 document.addEventListener('DOMContentLoaded',function(){ 
  var oC=document.querySelector('canvas'); 
  var gd=oC.getContext('2d'); 
  var r=oC.width/2; 
 
  function drawBackground() { 
  gd.save(); 
  //渐变 
 
  var ra = gd.createLinearGradient(600, 0, 400, 0); 
  ra.addColorStop(1, '#2dd9ff'); 
  ra.addColorStop(0, '#8c48dd'); 
 
  //表盘 
  gd.translate(r, r); 
  gd.beginPath(); 
  gd.fillStyle = ra; 
  gd.lineWidth = 10; 
  gd.strokeStyle = '#211f4e'; 
  gd.arc(0, 0, r-5, 0, Math.PI *2, false); 
  gd.fill(); 
  gd.stroke(); 
  //数字 
  for (var i = 1; i < 13; i++) { 
   var rad=i * Math.PI * 2 / 12; 
   var x = Math.sin(rad)*(r-70); 
   var y= -Math.cos(rad)*(r-70); 
   gd.fillStyle = "red"; 
   gd.font = "bold 80px Calibri"; 
   gd.lineWidth = 1; 
   gd.textAlign = 'center'; 
   gd.textBaseline = 'middle'; 
   gd.strokeText(i, x, y); 
  } 
  //点 
  for (var i = 0; i < 60; i++) { 
   gd.beginPath(); 
   var rad=i * Math.PI * 2 / 60; 
   var x = Math.sin(rad)*(r-30); 
   var y= -Math.cos(rad)*(r-30); 
   if (i % 5 == 0) { 
   gd.fillStyle = 'red'; 
   } 
   else { 
   gd.fillStyle = '#ccc' 
   } 
   gd.lineWidth = 2; 
   gd.arc(x, y, 6, 0, Math.PI * 2, false); 
   gd.fill(); 
   gd.stroke(); 
   gd.closePath(); 
  } 
  } 
  //时针 
  function drawHour(h,m){ 
  gd.save(); 
  gd.beginPath(); 
  var rad=2*Math.PI/12*h; 
  var mrad=2*Math.PI/12/60*m; 
  gd.rotate(rad+mrad); 
  gd.lineWidth=20; 
  gd.lineCap='round'; 
  gd.moveTo(0,10); 
  gd.lineTo(0,-r/3); 
  gd.stroke(); 
  gd.closePath(); 
  gd.restore(); 
  } 
  //分针 
  function drawMinutes(m){ 
  gd.save(); 
  gd.beginPath(); 
  var rad=2*Math.PI/60*m; 
  gd.rotate(rad); 
  gd.lineWidth=10; 
  gd.lineCap='round'; 
  gd.moveTo(0,10); 
  gd.lineTo(0,-r/2); 
  gd.stroke(); 
  gd.closePath(); 
  gd.restore(); 
  } 
  //秒针 
  function drawSeconds(s){ 
  gd.save(); 
  gd.beginPath(); 
  var rad=2*Math.PI/60*s; 
  gd.rotate(rad); 
  gd.fillStyle='red'; 
  gd.moveTo(-2,20); 
  gd.lineTo(2,20); 
  gd.lineTo(1,-r+100); 
  gd.lineTo(-1,-r+100); 
  gd.fill(); 
  gd.closePath(); 
  gd.restore(); 
  } 
  //圆点 
  function drawPoint(){ 
  gd.beginPath(); 
  gd.fillStyle='#fff'; 
  gd.arc(0,0,5,Math.PI*2,false); 
  gd.fill(); 
  } 
 
  function drawClock(){ 
  gd.clearRect(0,0,oC.width,oC.height); 
  var oDate=new Date(); 
  var h=oDate.getHours(); 
  var m=oDate.getMinutes(); 
  var s=oDate.getSeconds(); 
  drawBackground(); 
  drawHour(h,m); 
  drawMinutes(m); 
  drawSeconds(s); 
  drawPoint(); 
  gd.restore(); 
 
  } 
  drawClock(); 
  setInterval(drawClock,1000); 
 },false); 
 </script> 
</head> 
<body> 
<canvas width="800" height="800"></canvas> 
</body> 
</html>

效果图:

JavaScript Canvas绘制圆形时钟效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
基于JavaScript实现的插入排序算法分析
Apr 14 #Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 #Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 #Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 #Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 #Javascript
angularjs实现首页轮播图效果
Apr 14 #Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 #Javascript
You might like
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python中的元组介绍
2019/01/28 Python
python实现海螺图片的方法示例
2019/05/12 Python
Python编程中类与类的关系详解
2019/08/08 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
阿里云:Aliyun.com
2017/02/15 全球购物
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
业务员岗位职责
2013/11/16 职场文书
打架检讨书500字
2014/01/29 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
微笑服务标语
2014/06/24 职场文书
课内比教学心得体会
2014/09/09 职场文书
初中家长评语大全
2014/12/26 职场文书
人事主管岗位职责
2015/02/04 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android
python自动化测试通过日志3分钟定位bug
2021/11/20 Python