javascriptcanvas封裝動(dòng)態(tài)時(shí)鐘-創(chuàng)新互聯(lián)
本文實(shí)例為大家分享了canvas封裝動(dòng)態(tài)時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas繪制動(dòng)態(tài)時(shí)鐘</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() {
// 繪制外圈圓環(huán)
ctx.save() // 每次開(kāi)始前都要保存當(dāng)前畫(huà)布狀態(tài)，以免移動(dòng)畫(huà)布影響后續(xù)繪制
ctx.translate(r, r) // 設(shè)置起始點(diǎn)為圓心
ctx.beginPath() // 每次開(kāi)始繪制前必須開(kāi)始一條路徑
ctx.lineWidth = 10 // 設(shè)置繪線的寬度
ctx.strokeStyle = canvasClockObj.outerRing
ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false) // 畫(huà)一個(gè)整圓
ctx.stroke() // 對(duì)圓進(jìn)行描邊
ctx.strokeStyle = '#000'
// 繪制分鐘 和 小時(shí)
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軸坐標(biāo)
var y = Math.sin(rad) * (r - 17) // 獲取每分鐘的y軸坐標(biāo)
ctx.beginPath() // 每次開(kāi)始繪制前必須開(kāi)始一條路徑
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() // 每次開(kāi)始繪制前必須開(kāi)始一條路徑
ctx.fillStyle = canvasClockObj.hourColor ? canvasClockObj.hourColor :'#000' // 設(shè)置 小時(shí)的顏色
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()
}
// 繪制時(shí)針
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()
}
// 使指針動(dòng)起來(lái)
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() //繪制圓盤(pán)背景
drawHour(hour, minute); //繪制時(shí)針
drawMinute(minute,second); //繪制分針
drawSecond(second); //繪制秒針
drawDot(); //繪制原點(diǎn)
}
draw()
setInterval(draw, 1000);
})(canvasClockObj)
}
canvasClock({
dom:document.getElementById('clock'), // 必填項(xiàng)： canvas節(jié)點(diǎn)
// outerRing:'purple', // 外圈圓環(huán)顏色 默認(rèn)值： #000
// hourColor:'skyblue', // 小時(shí)的顏色 默認(rèn)值 #000
// secondHand:'yellow' // 秒針的顏色 默認(rèn)值： #f00
})
</script>
</body>
</html>
分享題目：javascriptcanvas封裝動(dòng)態(tài)時(shí)鐘-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://aaarwkj.com/article48/cdpihp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、企業(yè)建站、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 投資500萬(wàn)的游樂(lè)場(chǎng)，在半年內(nèi)收回所有成本，每月凈賺上百萬(wàn)-創(chuàng)新互聯(lián)
- 怎么在iOS中對(duì)圖片進(jìn)行壓縮-創(chuàng)新互聯(lián)
- 如何防止網(wǎng)頁(yè)腳本病毒執(zhí)行-創(chuàng)新互聯(lián)
- vuecli3.0如何使用-創(chuàng)新互聯(lián)
- Zabbix如何實(shí)現(xiàn)Server和Agent的通信加密-創(chuàng)新互聯(lián)
- 298一年的云虛擬主機(jī)好不好-創(chuàng)新互聯(lián)
- 如何使用php實(shí)現(xiàn)用戶注冊(cè)登陸-創(chuàng)新互聯(lián)
- 大數(shù)據(jù)告訴你：Google排名高的是什么樣的頁(yè)面 ？ 2023-05-05
- 網(wǎng)站內(nèi)容排名在Google首頁(yè)需要關(guān)注的幾大因素是什么？ 2015-12-15
- 【google搜索解析】Google搜索解析使用技巧 2020-07-24
- Google優(yōu)化還是谷歌推廣最好的選擇嗎？ 2016-04-17
- google搜索引擎優(yōu)化什么時(shí)間做效果最好？ 2015-01-12
- GOOGLE瀏覽器Chrome有紅色頁(yè)面提示要訪問(wèn)的網(wǎng)站包含惡意軟件解決方案 2014-06-11
- Google對(duì)為何對(duì)新站都比較敏感呢？ 2016-11-21
- Google左側(cè)排名最新攻略 2016-03-02
- 做百度的排名和做google搜索引擎優(yōu)化的差別 2020-03-31
- 如何做Google Shopping海外推廣廣告？收費(fèi)費(fèi)用是多少？ 2016-03-10
- 做外貿(mào)網(wǎng)站需了解GOOGLE搜索引擎的檢索和排名機(jī)制 2022-04-09
- 新版Google Fonts，多種字體供網(wǎng)站建設(shè)者免費(fèi)使用 2019-09-26