javascript canvas封装动态时钟_代码知识_七洗推广网
17370845950

javascript canvas封装动态时钟

#代码知识 发布时间： 2026-01-12

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

代码知识SEO

上一篇 : Springboot集成定时器和多线程异步处理操作

下一篇 : python Matplotlib数据可视化（2）：详解三大容器对象与常用设置

推荐阅读

电话：17370845950
QQ：915688610
邮箱：915688610@qq.com
友情链接：
百度
腾讯
新浪
淘宝
微博
品牌营销
客服微信
搜索营销
公众号
©  七洗推广网 版权所有 赣ICP备2024031099号
南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 七洗清洁网 七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 七洗清洁网 七洗清洁网 七洗清洁网 七洗清洁网 七洗清洁网 七洗清洁网
友情链接：
品牌营销
专业SEO优化
添加左侧专家微信
获取产品详细报价方案
品牌网络推广
搜索营销实战者
专注企业品牌搜索营销