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 函数使用说明
Apr 07 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 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 面向对象 final类与final方法
2010/05/05 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
php缓冲输出实例分析
2015/01/05 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
浅谈json取值(对象和数组)
2016/06/24 Javascript
Node.js实现文件上传
2016/07/05 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
python使用socket进行简单网络连接的方法
2015/04/29 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python-str,list,set间的转换实例
2018/06/27 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
人事部主管岗位职责
2013/12/26 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
网站美工岗位职责
2014/04/02 职场文书
借款协议书范本
2014/04/22 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
节能环保演讲稿
2014/08/28 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers