先看个效果图吧，如下：
废话不多说，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas绘制动态时钟 | Web前端之家www.jiangweishan.com</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>
网友评论文明上网理性发言 已有0人参与
发表评论: