javascript canvas時計シミュレータ
canvas時計シミュレータは、以下の通りです。
主な機能
現在の時間を表示しても、ナイトモードとデイモードを切り替えることができます。
主要コード
h=h>12h：h-12//午後時間修正
//画布の状態が混沌としている場合は、ctx.rester（）を使用して最初の状態に戻すことが多く、強制的に同じ方法で状態を直さないようにします。例えば、rotateを使って時計回りにn度回転した後、rotateを使って同じ反時計回りに戻ります。
参照コード
デイモード:
ナイトモード
切り替えモード
まとめ:
実は、コードでできない効果はありません。あなたの思いつかない効果だけです。多くの複雑なものは実は、本質的には多くの簡単なものの一つの統合であり、一心に研究しさえすれば、必ず収穫があります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
主な機能
現在の時間を表示しても、ナイトモードとデイモードを切り替えることができます。
主要コード
h=h>12h：h-12//午後時間修正
//画布の状態が混沌としている場合は、ctx.rester（）を使用して最初の状態に戻すことが多く、強制的に同じ方法で状態を直さないようにします。例えば、rotateを使って時計回りにn度回転した後、rotateを使って同じ反時計回りに戻ります。
参照コード
<!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，
</canvas>
<div class="mode">
Night mode
</div>
<div id="fullscreen"></div>
</body>
<script>
/*
*
*
*
* */
window.onload = () => {
// ，
// 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'
}
}
// （ ）
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'
}
}
// （ ）
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()
//
//
function doHidden() {
let time = ''
document.body.onmousemove = () => {
document.body.style.cursor = 'default' //
console.log('ok')
if (time) {
clearTimeout(time)
}
//
time = setTimeout(() => {
console.log('ok2')
document.body.style.cursor = nightMode === false ? `url('./imgs/hidden-box2.ani'), default` : `url('./imgs/hidden-box.ani'), default` // ， ， ani
}, 1000)
}
}
let canvas = document.getElementById('demo')
let ctx = canvas.getContext('2d')
// ，
ctx.translate(500, 300)
//
drew()
//
setInterval(() => {
drew()
}, 500)
//
function drew() {
//
ctx.fillStyle = nightMode === false ? '#fff' : '#000'
ctx.fillRect(-500, -300, 1000, 600)
//
ctx.save()
ctx.lineWidth = 6
ctx.strokeStyle = '#FFD034'
ctx.lineCap = 'round' //
ctx.rotate(-90 * Math.PI / 180) //
ctx.beginPath()
ctx.arc(0, 0, 240, 0, 360 * Math.PI / 180)
ctx.stroke()
//
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()
// ，
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 //
//
ctx.save()
ctx.lineWidth = 18
ctx.strokeStyle = '#91FF99'
ctx.rotate(30 * h * Math.PI / 180) //
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) //
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) //
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()
// ` `
ctx.beginPath()
ctx.arc(0, 0, 15, 0, 360 * Math.PI / 180)
ctx.fillStyle = '#FF8465'
ctx.fill()
ctx.restore()
ctx.restore() // （ ）
}
}
</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>デイモード:
ナイトモード
切り替えモード
まとめ:
実は、コードでできない効果はありません。あなたの思いつかない効果だけです。多くの複雑なものは実は、本質的には多くの簡単なものの一つの統合であり、一心に研究しさえすれば、必ず収穫があります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。