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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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 stream_context_create()作用和用法分析
2011/03/29 PHP
基于php 随机数的深入理解
2013/06/05 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python 检查文件mime类型的方法
2018/12/08 Python
django 自定义过滤器的实现
2019/02/26 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python3并发写文件与Python对比
2019/11/20 Python
Python如何给函数库增加日志功能
2020/08/04 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
酒店管理自荐信
2013/10/23 职场文书
机械电子工程专业推荐信范文
2013/11/20 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
设备技术员岗位职责
2015/04/11 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
初中班长竞选稿
2015/11/20 职场文书