javascript canvas封装动态时钟


Posted in Javascript onSeptember 30, 2020

本文实例为大家分享了canvas封装动态时钟的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>canvas绘制动态时钟</title>
 <style>
 #clock {
  display: block;
  margin: 30px auto;
 }
 </style>
</head>

<body>
 <canvas id="clock" width="200" height="200"></canvas>
 <script>

 function canvasClock(canvasClockObj) {
  return (function (canvasClockObj) {
  var ctx = canvasClockObj.dom.getContext('2d')
  let width = ctx.canvas.width
  let height = ctx.canvas.height
  let r = width > height ? height / 2 : width / 2

  // 绘制背景板
  function drawBackground() {
   // 绘制外圈圆环
   ctx.save() // 每次开始前都要保存当前画布状态,以免移动画布影响后续绘制
   ctx.translate(r, r) // 设置起始点为圆心
   ctx.beginPath() // 每次开始绘制前必须开始一条路径
   ctx.lineWidth = 10 // 设置绘线的宽度
   ctx.strokeStyle = canvasClockObj.outerRing
   ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false) // 画一个整圆
   ctx.stroke() // 对圆进行描边
   ctx.strokeStyle = '#000'
   // 绘制分钟 和 小时
   var minuteNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60]
   minuteNumbers.map(function (number, i) {
   var rad = 2 * Math.PI / 60 * i
   var x = Math.cos(rad) * (r - 17) // 获取每分钟的x轴坐标
   var y = Math.sin(rad) * (r - 17) // 获取每分钟的y轴坐标
   ctx.beginPath() // 每次开始绘制前必须开始一条路径
   ctx.fillStyle = '#ccc'
   ctx.arc(x, y, 2, 0, 2 * Math.PI, false)
   ctx.fill()
   })
   var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
   hourNumbers.map(function (number, i) {
   var rad = 2 * Math.PI / 12 * i
   var x = Math.cos(rad) * (r - 30)
   var y = Math.sin(rad) * (r - 30)
   var x1 = Math.cos(rad) * (r - 17)
   var y1 = Math.sin(rad) * (r - 17)
   ctx.beginPath() // 每次开始绘制前必须开始一条路径
   ctx.fillStyle = canvasClockObj.hourColor ? canvasClockObj.hourColor :'#000' // 设置 小时的颜色
   ctx.textAlign = 'center' // 使文字左右居中
   ctx.textBaseline = 'middle' // 使文字上下居中
   ctx.font = 14 + 'px Arial'
   ctx.fillText(number, x, y)
   ctx.arc(x1, y1, 2, 0, 2 * Math.PI, false)
   ctx.fill()
   })
  }
  drawBackground()

  // 绘制圆心
  function drawDot() {
   ctx.beginPath()
   ctx.fillStyle = '#fff'
   ctx.lineWidth = 1
   ctx.arc(0, 0, 3, 2 * Math.PI, false)
   ctx.fill()
  }
  // 绘制时针
  function drawHour(hour, minute) {
   ctx.save()
   ctx.beginPath()
   var hrad = Math.PI / 12 * hour * 2
   var mrad = Math.PI / 12 / 60 * minute * 2
   ctx.rotate(hrad + mrad)
   ctx.lineWidth = 4
   ctx.moveTo(0, 10)
   ctx.lineTo(0, -r / 2.5)
   ctx.lineCap = 'round'
   ctx.stroke()
   ctx.restore()
  }
  // 绘制分针
  function drawMinute(minute, second) {
   ctx.save()
   ctx.beginPath()
   var mrad = Math.PI / 60 * minute * 2
   var srad = Math.PI / 60 / 60 * second * 2
   ctx.rotate(srad + mrad)
   ctx.lineWidth = 0.5
   ctx.lineJoin = 'round'
   ctx.fillStyle = '#000'
   ctx.moveTo(2, 10)
   ctx.lineTo(0, -r / 1.7)
   ctx.lineTo(-2, 10)
   ctx.lineTo(2, 10)
   ctx.lineCap = 'round'
   ctx.fill()
   ctx.restore()
  }
  // 绘制秒针
  function drawSecond(second) {
   ctx.save()
   ctx.beginPath()
   var srad = Math.PI / 30 * second
   ctx.rotate(srad)
   ctx.lineWidth = 0.5
   ctx.lineJoin = 'round'
   ctx.fillStyle = canvasClockObj.secondHand ? canvasClockObj.secondHand : '#f00'
   ctx.moveTo(2, 10)
   ctx.lineTo(0, -r / 1.2)
   ctx.lineTo(-2, 10)
   ctx.lineTo(2, 10)
   ctx.lineCap = 'round'
   ctx.fill()
   ctx.restore()
  }
  // 使指针动起来
  function draw() {
   ctx.translate(-r, -r)
   ctx.clearRect(0, 0, width, height)
   var now = new Date()
   var hour = now.getHours()
   var minute = now.getMinutes()
   var second = now.getSeconds()
   drawBackground()        //绘制圆盘背景
   drawHour(hour, minute);       //绘制时针
   drawMinute(minute,second);        //绘制分针
   drawSecond(second);        //绘制秒针
   drawDot();           //绘制原点 
  }
  draw()
  setInterval(draw, 1000);
  })(canvasClockObj)
 }
 canvasClock({
  dom:document.getElementById('clock'), // 必填项: canvas节点
  // outerRing:'purple', // 外圈圆环颜色 默认值: #000 
  // hourColor:'skyblue', // 小时的颜色 默认值 #000
  // secondHand:'yellow' // 秒针的颜色 默认值: #f00
 })
 </script>
</body>

</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 #Javascript
Vue实现穿梭框效果
Sep 30 #Javascript
原生js实现表格翻页和跳转
Sep 29 #Javascript
vue实现井字棋游戏
Sep 29 #Javascript
js实现移动端图片滑块验证功能
Sep 29 #Javascript
js+cavans实现图片滑块验证
Sep 29 #Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 #Javascript
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python 实现简单的电话本功能
2015/08/09 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
绝对经典成功的大学生推荐信
2013/11/08 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
卫生系统先进事迹
2014/05/13 职场文书
社区健康教育工作方案
2014/06/03 职场文书
经典禁毒标语
2014/06/16 职场文书
会计岗位职责范本
2015/04/02 职场文书
同学聚会通知短信
2015/04/20 职场文书
师范生教育见习总结
2015/06/23 职场文书
小学运动会前导词
2015/07/20 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2019个人半年工作总结
2019/06/21 职场文书
MySQL基础(一)
2021/04/05 MySQL
用Python创建简易网站图文教程
2021/06/11 Python
pandas数值排序的实现实例
2021/07/25 Python