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 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
vue实现倒计时功能
Mar 24 Vue.js
TypeScript中条件类型精读与实践记录
Oct 05 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实现在服务器上创建目录的方法
2015/03/16 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
python 2.7.14安装图文教程
2018/04/08 Python
python实现电子产品商店
2019/02/26 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
《北京的春节》教学反思
2014/04/07 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
答谢词范文
2015/01/05 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
Python实现文字pdf转换图片pdf效果
2022/04/03 Python