javascript canvas時(shí)鐘模擬器
更新時(shí)間：2020年07月13日 08:45:29 作者：kaiqisan
這篇文章主要為大家詳細(xì)介紹了javascript canvas時(shí)鐘模擬器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
canvas時(shí)鐘模擬器，供大家參考，具體內(nèi)容如下
主要功能
能夠顯示當(dāng)前的時(shí)間，也能夠切換夜晚模式和白天模式
主要代碼
h = h > 12 ? h : h - 12 // 下午時(shí)間修正
// 如果畫布狀態(tài)很混沌的話多使用ctx.restore()恢復(fù)到最初狀態(tài)而不要強(qiáng)行再用同樣的方法矯正狀態(tài),比如使用rotate順時(shí)針旋轉(zhuǎn)n度之后，再使用rotate以同樣的逆時(shí)針角度轉(zhuǎn)回去.
參考代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鐘表模擬器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="demo" width="1000px" height="600px">
您的瀏覽器不支持canvas，請(qǐng)升級(jí)您的瀏覽器
</canvas>
<div class="mode">
Night mode
</div>
<div id="fullscreen"></div>
</body>
<script>
/*
*
* 模擬鐘表
*
* */
window.onload = () => {
// 瀏覽器禁止在你剛剛進(jìn)入一個(gè)頁(yè)面的時(shí)候就變成全屏，這是為了用戶的安全和體驗(yàn)
// let elem = document.querySelector('#fullscreen')
//
// let event = new Event('myEvent')
//
// elem.addEventListener('myEvent', function (e) {
// console.log('ok')
// setTimeout(() => {
// let element = document.documentElement
// if (element.requestFullscreen) {
// element.requestFullscreen()
// } else if (element.msRequestFullscreen) {
// element.msRequestFullscreen()
// } else if (element.mozRequestFullScreen) {
// element.mozRequestFullScreen()
// } else if (element.webkitRequestFullscreen) {
// element.webkitRequestFullscreen()
// }
// }, 1000)
//
// }, false)
//
// elem.dispatchEvent(event)
// 切換夜晚模式和白天模式
let mode = document.getElementsByClassName('mode')
let nightMode = false
mode[0].onclick = () => {
nightMode = !nightMode
document.body.style.backgroundColor = nightMode === false ? '#fff' : '#000'
mode[0].innerHTML = nightMode === false ? 'Night mode' : 'exit'
if (nightMode) {
mode[0].style.color = '#000'
mode[0].style.backgroundColor = '#fff'
} else {
mode[0].style.color = '#fff'
mode[0].style.backgroundColor = '#000'
}
}
// 鼠標(biāo)進(jìn)入變色（可進(jìn)一步簡(jiǎn)潔）
mode[0].onmouseover = () => {
if (nightMode) {
mode[0].style.color = '#000'
mode[0].style.backgroundColor = '#fff'
} else {
mode[0].style.color = '#fff'
mode[0].style.backgroundColor = '#000'
}
}
// 鼠標(biāo)移出變色（可進(jìn)一步簡(jiǎn)潔）
mode[0].onmouseout = () => {
if (nightMode) {
mode[0].style.color = '#fff'
mode[0].style.backgroundColor = '#000'
} else {
mode[0].style.color = '#000'
mode[0].style.backgroundColor = '#fff'
}
}
doHidden()
//
// 在一秒之后把光標(biāo)去掉
function doHidden() {
let time = ''
document.body.onmousemove = () => {
document.body.style.cursor = 'default' // 恢復(fù)普通的光標(biāo)
console.log('ok')
if (time) {
clearTimeout(time)
}
// 一秒后鼠標(biāo)不動(dòng)自動(dòng)使光標(biāo)消失
time = setTimeout(() => {
console.log('ok2')
document.body.style.cursor = nightMode === false ? `url('./imgs/hidden-box2.ani'), default` : `url('./imgs/hidden-box.ani'), default` // 這里的光標(biāo)文件自己定義，最好是透明的空文件，找網(wǎng)上的圖標(biāo)文件轉(zhuǎn)換器轉(zhuǎn)換為ani文件
}, 1000)
}
}
let canvas = document.getElementById('demo')
let ctx = canvas.getContext('2d')
// 為了繪制時(shí)針，把坐標(biāo)軸原點(diǎn)轉(zhuǎn)移到畫布中心
ctx.translate(500, 300)
// 開(kāi)始正式繪制第一次
drew()
// 持續(xù)更新畫布
setInterval(() => {
drew()
}, 500)
// 核心方法
function drew() {
// 刷新畫布
ctx.fillStyle = nightMode === false ? '#fff' : '#000'
ctx.fillRect(-500, -300, 1000, 600)
// 時(shí)鐘的大框框
ctx.save()
ctx.lineWidth = 6
ctx.strokeStyle = '#FFD034'
ctx.lineCap = 'round' // 筆畫尖端為圓形
ctx.rotate(-90 * Math.PI / 180) // 十二點(diǎn)鐘方向
ctx.beginPath()
ctx.arc(0, 0, 240, 0, 360 * Math.PI / 180)
ctx.stroke()
// 時(shí)針的刻度
ctx.save()
ctx.lineWidth = 10
ctx.strokeStyle = nightMode === true ? '#fff' : '#000'
for (let i = 0; i <= 11; i++) {
ctx.beginPath()
ctx.moveTo(200, 0)
ctx.lineTo(222, 0)
ctx.stroke()
ctx.rotate(30 * Math.PI / 180)
}
ctx.restore()
// 分針的刻度
ctx.save()
ctx.lineWidth = 4
ctx.strokeStyle = '#9B71EA'
for (let i = 0; i < 60; i++) {
if (i % 5 === 0) {
ctx.rotate(6 * Math.PI / 180)
} else {
ctx.beginPath()
ctx.moveTo(205, 0)
ctx.lineTo(222, 0)
ctx.stroke()
ctx.rotate(6 * Math.PI / 180)
}
}
ctx.restore()
// 獲取時(shí)間，正式開(kāi)始繪制
let date = new Date()
let s = date.getSeconds()
let m = date.getMinutes() + s / 60
let h = date.getHours() + m / 60
h = h > 12 ? h : h - 12 // 下午時(shí)間修正
// 畫時(shí)針
ctx.save()
ctx.lineWidth = 18
ctx.strokeStyle = '#91FF99'
ctx.rotate(30 * h * Math.PI / 180) // 順時(shí)針旋轉(zhuǎn)的
ctx.beginPath()
ctx.moveTo(-20, 0)
ctx.lineTo(100, 0)
ctx.stroke()
ctx.restore()
// 畫分針
ctx.save()
ctx.lineWidth = 12
ctx.strokeStyle = '#D291FF'
ctx.rotate(6 * m * Math.PI / 180) // 順時(shí)針旋轉(zhuǎn)的
ctx.beginPath()
ctx.moveTo(-35, 0)
ctx.lineTo(138, 0)
ctx.stroke()
ctx.restore()
// 畫秒針
ctx.save()
ctx.lineWidth = 8
ctx.strokeStyle = '#FF8465'
ctx.rotate(6 * s * Math.PI / 180) // 順時(shí)針旋轉(zhuǎn)的
ctx.beginPath()
ctx.moveTo(-55, 0)
ctx.lineTo(115, 0)
ctx.stroke()
// 給秒針添加花樣
ctx.beginPath()
ctx.arc(130, 0, 15, 0, 360 * Math.PI / 180)
ctx.stroke()
ctx.beginPath()
ctx.moveTo(145, 0)
ctx.lineTo(178, 0)
ctx.stroke()
// 最后給鐘添加最中心的一個(gè)`固定器`
ctx.beginPath()
ctx.arc(0, 0, 15, 0, 360 * Math.PI / 180)
ctx.fillStyle = '#FF8465'
ctx.fill()
ctx.restore()
ctx.restore() // 回到最初最初最初的狀態(tài)（主要是把為了畫時(shí)針而把畫布旋轉(zhuǎn)的角度矯正回去）
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
text-align: center;
transition: 0.5s;
}
#demo {
margin-top: 140px;
background-color: white;
border-radius: 15px;
}
.mode {
font-family: Consolas, serif;
width: 150px;
margin: 25px auto;
padding: 15px 25px;
border: 2px solid #CCCCCC;
border-radius: 15px;
background-color: white;
user-select: none;
box-shadow: 1px 1px 2px #aaaaaa;
transition: 0.5s;
cursor: pointer;
}
</style>
</html>
顯示效果：
白天模式：
夜晚模式
切換模式
總結(jié)：
其實(shí)，沒(méi)有什么代碼做不出的效果，只有你想不到的效果。很多復(fù)雜的東西其實(shí)，在本質(zhì)上，會(huì)是很多簡(jiǎn)單的東西的一種整合，只要用心去鉆研，一定會(huì)有收獲！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript編寫開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘
- javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘
- js實(shí)現(xiàn)時(shí)鐘定時(shí)器
- JS實(shí)現(xiàn)網(wǎng)頁(yè)時(shí)鐘特效
- js實(shí)現(xiàn)小時(shí)鐘效果
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘效果
- html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
- 五步輕松實(shí)現(xiàn)JavaScript HTML時(shí)鐘效果
- JavaScript實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘實(shí)例代碼
- js+css3實(shí)現(xiàn)炫酷時(shí)鐘
相關(guān)文章
關(guān)于js中的繼承，網(wǎng)上有很多文章了，在這里我寫出自己對(duì)js中的繼承的理解2012-01-01
JavaScript動(dòng)態(tài)生成帶刪除行功能的表格
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)生成帶刪除行功能的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
檢測(cè)是否已安裝 .NET Framework 3.5的js腳本
管理員必須首先確認(rèn)存在 .NET Framework 3.5 運(yùn)行庫(kù)，然后才能將 Windows Presentation Foundation (WPF) 應(yīng)用程序部署在面向 .NET Framework 3.5 的系統(tǒng)上。2009-02-02
JavaScript學(xué)習(xí)點(diǎn)滴 call、apply的區(qū)別
對(duì)于apply和call兩者在作用上是相同的，但兩者在參數(shù)上有區(qū)別的。2010-10-10
二分查找也稱折半查找,它是一種效率較高的查找方法,本文主要介紹了JS實(shí)現(xiàn)二分查找的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
JavaScript 不只是腳本...2007-05-05
JavaScript實(shí)現(xiàn)生成隨機(jī)密碼的示例詳解
使用JavaScript我們可以輕松地在客戶端生成隨機(jī)密碼,本文我們將實(shí)現(xiàn)一個(gè)簡(jiǎn)單的隨機(jī)密碼生成器,能夠生成指定長(zhǎng)度和包含特定字符集的密碼,有需要的可以參考下2024-01-01
淺談JavaScript中Date(日期對(duì)象),Math對(duì)象
這篇文章主要簡(jiǎn)單介紹了JavaScript中Date(日期對(duì)象),Math對(duì)象的相關(guān)資料,需要的朋友可以參考下2015-02-02
淺析在javascript中創(chuàng)建對(duì)象的各種模式
下面小編就為大家?guī)?lái)一篇淺析在javascript中創(chuàng)建對(duì)象的各種模式。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
詳解微信小程序?qū)崿F(xiàn)仿微信聊天界面(各種細(xì)節(jié)處理)
這篇文章主要介紹了詳解微信小程序?qū)崿F(xiàn)仿微信聊天界面(各種細(xì)節(jié)處理)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02