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 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
JavaScript 事件系统
Jul 22 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
基于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 setTime 设置当前时间的代码
2012/08/27 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
python使用psutil模块获取系统状态
2016/08/27 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
毕业生求职推荐信
2013/11/04 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
甜品店创业计划书
2014/08/14 职场文书
党的生日演讲稿
2014/09/10 职场文书
打架检讨书
2015/01/27 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
关爱空巢老人感想
2015/08/11 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技