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 事件执行检测代码
Dec 09 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
Vue实现图片与文字混输效果
Dec 04 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
桌面中心(三)修改数据库
2006/10/09 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
ThinkPHP安装和设置
2015/07/27 PHP
php计算title标题相似比的方法
2015/07/29 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
简单了解python中的与或非运算
2019/09/18 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
一篇.NET面试题
2014/09/29 面试题
客户接待方案
2014/02/26 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
房展策划方案
2014/06/07 职场文书
公证委托书
2014/08/01 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB