javascript canvas封裝動態時鐘
阿新 • • 發佈：2020-10-09
本文例項為大家分享了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,r - ctx.lineWidth / 2,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,false)
ctx.fill()
})
var hourNumbers = [3,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,false)
ctx.fill()
})
}
drawBackground()
// 繪製圓心
function drawDot() {
ctx.beginPath()
ctx.fillStyle = '#fff'
ctx.lineWidth = 1
ctx.arc(0,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,-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,-r / 1.2)
ctx.lineTo(-2,10)
ctx.lineCap = 'round'
ctx.fill()
ctx.restore()
}
// 使指標動起來
function draw() {
ctx.translate(-r,-r)
ctx.clearRect(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時鐘特效專題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。