【前端html/js】使用canvas实现实时时钟
实现效果
- 代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飛宇时钟</title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
"use strict ";
function getDatetime(){
let da = new Date();
let hours = da.getHours();
hours=hours>12?hours-12:hours;
let minute = da.getMinutes();
let second = da.getSeconds();
return [hours,minute,second];
}
</script>
<script type="text/javascript">
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// 绘制刻度函数
function scaleRender(deg,start,end,bw,color){
ctx.beginPath();
ctx.rotate(deg); // 旋转
ctx.moveTo(start,0);
ctx.lineTo(end,0);
ctx.lineWidth=bw;
ctx.strokeStyle=color;
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.save();
}
function initClockBasicInfo(){
// 圆的中心的 x 坐标,圆的中心的 y 坐标,圆的半径,起始角，以弧度计,结束角，以弧度计。可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针
// ctx.arc(400,300,200,0,2*Math.PI)
ctx.beginPath();
ctx.arc(0,0,200,0,2*Math.PI)
ctx.strokeStyle="darkgrey";
ctx.lineWidth=10;
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.save();
// 绘制分钟刻度
for(let j=0;j<60;j++){
ctx.rotate(Math.PI/30)
ctx.beginPath();
ctx.moveTo(180,0);
ctx.lineTo(190,0);
ctx.lineWidth = 2;
ctx.strokeStyle="orangered"
ctx.stroke()
ctx.closePath();
}
ctx.restore();
ctx.save();
// 绘制时钟刻度
for(let i=0;i<12;i++){
ctx.rotate(Math.PI/6)
ctx.beginPath();
ctx.moveTo(180,0);
ctx.lineTo(200,0);
ctx.lineWidth = 10;
ctx.strokeStyle="darkgray"
ctx.stroke()
ctx.closePath();
}
ctx.restore();
ctx.save();
// 绘制时钟刻度数字
for(let i=1;i<=12;i++){
ctx.rotate((Math.PI/6));
ctx.save();
ctx.beginPath();
ctx.translate(165,-4);
ctx.rotate(Math.PI/2-(Math.PI/6)*i);
ctx.strokeStyle="skyblue"
// ctx.strokeText((i,150,0)
ctx.fillText(i, 0, 0);
// ctx.stroke();
ctx.closePath();
ctx.restore();
}
ctx.restore();
ctx.save();
}
// 初始化时钟
function initClock(){
ctx.clearRect(0,0,800,600);
ctx.save();
// 将画布移动画布中央
ctx.translate(400,300);
ctx.rotate(-Math.PI/2)
ctx.save();
initClockBasicInfo();
let time = getDatetime();
// 绘制秒针
scaleRender(Math.PI/30*time[2],-30,170,2,"coral");
// 绘制分针
scaleRender(Math.PI/30*time[1]+2*Math.PI/3600*time[2],-20,150,3,"darkblue");// 根据分针的时间进行旋转
// 绘制时针
scaleRender(Math.PI/6*time[0]+2*Math.PI/(12*60)*time[1] + 2*Math.PI/(12*3600)*time[2],
-10,140,3,"darkslategray");// 根据时针的时间进行旋转
//
ctx.beginPath();
ctx.arc(0,0,2,0,Math.PI*2);
ctx.strokeStyle="red";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.rotate(Math.PI/2)
ctx.font="20px 微软雅黑";
ctx.fillText(`${time[0]}:${time[1]}:${time[2]}`,-40,260);
ctx.restore();
}
initClock();
setInterval(function(){
initClock();
},1000);
</script>
</body>
</html>
演示地址
写于:2022年1月8日
作者QQ：420318184
邮箱:fy@0fy0.com
