javascript canvas封装动态时钟_JavaScript

本文实例为大家分享了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>