本文实例为大家分享了canvas封装动态时钟的具体代码，供大家参考，具体内容如下
|
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
<!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>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/raingrains/article/details/108865461