当前位置: 首页 > 编程笔记 >

javascript canvas封装动态时钟

姬安志
2023-03-14
本文向大家介绍javascript canvas封装动态时钟,包括了javascript canvas封装动态时钟的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了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时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 爱是恒久忍耐,又有恩慈;爱是不嫉妒,爱是不自夸,不张狂,不作害羞的事,不求自己的益处,不轻易发怒,不计算人的恶,不喜欢不义,只喜欢真理;凡事包容,凡事相信,凡事盼望,凡事忍耐。(1 CORINTHIANS 13:4-7) 多态和封装 “多态”和“封装”是OOP的重要特征——前面说的“继承”也是。但是,对于Python而言,对这两个的理解也有很多不同。建议读者“吃百家宴”,到网上搜一搜有关话题,不少

  • 6.6. 封装 一个对象的变量或者方法如果对调用方是不可见的话,一般就被定义为“封装”。封装有时候也被叫做信息隐藏,同时也是面向对象编程最关键的一个方面。 Go语言只有一种控制可见性的手段:大写首字母的标识符会从定义它们的包中被导出,小写字母的则不会。这种限制包内成员的方式同样适用于struct或者一个类型的方法。因而如果我们想要封装一个对象,我们必须将其定义为一个struct。 这也就是前面的小

  • prototype对象 构造函数的缺点 prototype属性的作用 原型链 constructor属性 Object.getPrototypeOf方法 Object.create方法 isPrototypeOf方法 prototype对象 构造函数的缺点 JavaScript通过构造函数生成新对象,因此构造函数可以视为对象的模板。实例对象的属性和方法,可以定义在构造函数内部。 function

  • 关于 axios 二次封装方法的问题 通过 class 创建多个实例 仅通过 axios 创建一个实例 哪种方法更好些呢?或者大家有更好的封装思路吗? 看了一些博客,关于用 class 包装的 axios, 给出来的好处是 不同的服务可以加不同的拦截器,我刚工作不久,不知道有什么场景需要用到这种需求。我更偏向于第二种方法,感觉我接触到的服务,只需要切换一下 baseUrl,并没有别的需求了。

  • 主要内容:1、public,2、private,3、protected,4、internal,5、protected internalC# 是一门面向对象编程语言,面向对象编程语言有三大特性,分别是封装、 继承和 多态。所谓封装就是将一个或多个项目(函数)集合在一个单元中,这个单元称之为类,我们可以根据需要通过访问权限修饰符来设定类中成员的范围和可见性。C# 中的访问权限修饰符有以下几种: public:公共的,所有对象都可以访问,但是需要引用命名空间; private:私有的,类的内部才可以访

  • 主要内容:Python 类如何进行封装?不光是 Python,大多数面向对象编程语言(诸如 C++、 Java 等)都具备 3 个典型特征,即封装、继承和多态。其中,本节重点讲解 Python 类的封装特性,继承和多态会在后续章节给大家做详细讲解。 简单的理解封装(Encapsulation),即在设计类时,刻意地将一些属性和方法隐藏在类的内部,这样在使用此类时,将无法直接以“类对象.属性名”(或者“类对象.方法名(参数)”)的形式调用