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 相关文章推荐
ajax与302响应代码测试
Oct 23 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
JS如何生成动态列表
Sep 22 Javascript
node.js通过url读取文件
Oct 16 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和ACCESS写聊天室(五)
2006/10/09 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
php输入数据统一类实例
2015/02/23 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
python中调试或排错的五种方法示例
2019/09/12 Python
python 初始化一个定长的数组实例
2019/12/02 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
模具毕业生推荐信
2014/02/15 职场文书
本科应届生求职信
2014/08/05 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
Ajax实现异步加载数据
2021/11/17 Javascript
JavaScript实现栈结构详细过程
2021/12/06 Javascript