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 相关文章推荐
js常用排序实现代码
Dec 28 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
js 走马灯简单实例
Nov 21 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
大学生水文观测实习自我鉴定
2013/09/29 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
董事长秘书职责
2014/01/31 职场文书
书香校园活动方案
2014/02/28 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
学生检讨书范文
2014/10/30 职场文书
小学中等生评语
2014/12/29 职场文书
求职信范文怎么写
2015/03/19 职场文书
入党群众意见范文
2015/06/02 职场文书
运动会班级前导词
2015/07/20 职场文书
儿子满月酒致辞
2015/07/29 职场文书
导游词之太湖
2019/10/08 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python