150 lines
3.4 KiB
HTML
150 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<Style>
|
||
#time-text {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 20px;
|
||
}
|
||
|
||
#canvas {
|
||
width: 450px;
|
||
height: 600px;
|
||
}
|
||
</Style>
|
||
</head>
|
||
<body>
|
||
<p id="time-text"></p>
|
||
<canvas id="canvas" width="600" height="800"></canvas>
|
||
<script>
|
||
let canvas = document.getElementById('canvas');
|
||
let timeText = document.querySelector('#time-text');
|
||
let cxt = canvas.getContext('2d');
|
||
cxt.translate(300, 300);//初始移动轴
|
||
let timer;
|
||
let hour;
|
||
let min;
|
||
let sec;
|
||
|
||
function time_update() {
|
||
let date = new Date();
|
||
hour = date.getHours();
|
||
hour = hour > 12 ? hour - 12 : hour;
|
||
min = date.getMinutes();
|
||
sec = date.getSeconds();
|
||
timeText.innerHTML = date.toTimeString().slice(0, 8);
|
||
cxt.clearRect(-300, -300, 800, 600)//清除掉上次的渲染
|
||
//按照顺序渲染
|
||
hour_();
|
||
min_();
|
||
sec_();
|
||
pan();
|
||
timer = window.requestAnimationFrame(time_update);
|
||
}
|
||
|
||
time_update();//启动requestAnimationFrame（默认间隔约16.7毫秒，对于浏览器一般最顺畅的间隔
|
||
//console.log(hour,min,sec)
|
||
//window.cancelAnimationFrame(timer)
|
||
|
||
function pan() {//表盘
|
||
cxt.save();//旋转之前
|
||
//绘制小刻度
|
||
for (let i = 0; i < 60; i++) {
|
||
cxt.strokeStyle = '#afafaf';
|
||
//if(i%5==4)cxt.strokeStyle='#8a8a8a';
|
||
cxt.rotate(Math.PI / 30)
|
||
cxt.beginPath();
|
||
cxt.moveTo(185, 0)
|
||
cxt.lineTo(190, 0)
|
||
cxt.lineWidth = 3
|
||
cxt.stroke();
|
||
cxt.closePath();
|
||
}
|
||
cxt.restore();//恢复旋转之前，其实正好一圈没影响
|
||
|
||
//绘制大刻度
|
||
cxt.save();//旋转之前
|
||
for (let i = 0; i < 12; i++) {
|
||
cxt.rotate(Math.PI / 6)
|
||
cxt.beginPath();
|
||
cxt.moveTo(180, 0)
|
||
cxt.lineTo(195, 0)
|
||
cxt.lineWidth = 6
|
||
cxt.strokeStyle = '#8a8a8a';
|
||
cxt.stroke();
|
||
cxt.closePath();
|
||
}
|
||
cxt.restore();//恢复旋转之前，其实正好一圈没影响
|
||
|
||
|
||
//绘制外圆
|
||
cxt.beginPath()
|
||
cxt.arc(0, 0, 200, 0, 2 * Math.PI)
|
||
cxt.strokeStyle = '#8a8a8a'
|
||
cxt.lineWidth = 10
|
||
cxt.stroke();
|
||
cxt.closePath();
|
||
|
||
//绘制中心点
|
||
cxt.beginPath()
|
||
cxt.arc(0, 0, 5, 0, 2 * Math.PI)
|
||
cxt.strokeStyle = 'black'
|
||
cxt.lineWidth = 5
|
||
cxt.stroke();
|
||
cxt.fillStyle = 'white'
|
||
cxt.fill();
|
||
cxt.closePath();
|
||
|
||
cxt.restore();
|
||
|
||
|
||
}
|
||
|
||
function sec_() {
|
||
cxt.save();
|
||
//绘制秒针
|
||
cxt.rotate(sec * Math.PI / 30 - Math.PI / 2)
|
||
cxt.beginPath();
|
||
cxt.moveTo(-30, 0)
|
||
cxt.lineTo(160, 0)
|
||
cxt.lineWidth = 3
|
||
cxt.strokeStyle = '#6c6';
|
||
cxt.stroke();
|
||
cxt.closePath();
|
||
cxt.restore();
|
||
}
|
||
|
||
function min_() {
|
||
cxt.save();
|
||
//绘制分针
|
||
cxt.rotate(min * Math.PI / 30 - Math.PI / 2 + sec * Math.PI / 1800)
|
||
cxt.beginPath();
|
||
cxt.moveTo(-20, 0)
|
||
cxt.lineTo(130, 0)
|
||
cxt.lineWidth = 5
|
||
cxt.strokeStyle = '#264';
|
||
cxt.stroke();
|
||
cxt.closePath();
|
||
cxt.restore();
|
||
}
|
||
|
||
function hour_() {
|
||
cxt.save();
|
||
//绘制时针
|
||
cxt.rotate(hour * Math.PI / 6 - Math.PI / 2 + min * Math.PI / 360 + sec * 2 * Math.PI / 12 / 60 / 60)
|
||
cxt.beginPath();
|
||
cxt.moveTo(-10, 0)
|
||
cxt.lineTo(100, 0)
|
||
cxt.lineWidth = 8
|
||
cxt.strokeStyle = '#910';
|
||
cxt.stroke();
|
||
cxt.closePath();
|
||
cxt.restore();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|