时钟
先看效果
源代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>自定义时钟</title>
<style>
body {
margin: 0; /* 去除页面默认的边距 */
display: flex; /* 使用flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 设置高度为视口高度 */
background: radial-gradient(circle at 50% 50%, #e0e0e0, #a0a0a0); /* 设置渐变背景 */
font-family: 'Arial', sans-serif; /* 设置字体 */
}
canvas {
border-radius: 50%; /* 将canvas设置为圆形 */
background-color: white; /* 设置canvas背景色为白色 */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas> <!-- 设置canvas的初始宽度和高度 -->
<script>
const canvas = document.getElementById('clock'); // 获取canvas元素
const ctx = canvas.getContext('2d'); // 获取2D绘图上下文
const clockRadius = canvas.width / 2; // 定义时钟半径
const clockColor = '#333'; // 定义时钟颜色
const handColor = '#000'; // 定义指针颜色
function resizeCanvas() {
const size = Math.min(window.innerWidth, window.innerHeight) * 0.8; // 根据窗口大小调整canvas尺寸
canvas.width = size; // 设置canvas宽度
canvas.height = size; // 设置canvas高度
ctx.translate(size / 2, size / 2); // 将坐标原点移到canvas中心
drawClock(); // 绘制时钟
}
function drawClock() {
ctx.clearRect(-clockRadius, -clockRadius, clockRadius * 2, clockRadius * 2); // 清除canvas内容
// 绘制时钟面
ctx.beginPath();
ctx.arc(0, 0, clockRadius - 10, 0, Math.PI * 2); // 绘制圆形
ctx.fillStyle = 'white'; // 设置填充颜色为白色
ctx.fill(); // 填充时钟面
ctx.strokeStyle = clockColor; // 设置边框颜色
ctx.lineWidth = 8; // 设置边框宽度
ctx.stroke(); // 绘制边框
// 绘制时钟数字
ctx.font = '24px Arial'; // 设置字体大小和样式
ctx.fillStyle = clockColor; // 设置字体颜色
ctx.textAlign = 'center'; // 设置字体对齐方式
ctx.textBaseline = 'middle'; // 设置字体基线
for (let i = 1; i <= 12; i++) { // 循环绘制1到12的数字
ctx.save(); // 保存当前绘图状态
ctx.rotate(i * Math.PI / 6); // 旋转到对应位置
ctx.translate(0, -clockRadius + 40); // 平移到对应位置
ctx.rotate(-i * Math.PI / 6); // 旋转回数字正常角度
ctx.fillText(i, 0, 0); // 绘制数字
ctx.restore(); // 恢复绘图状态
}
// 绘制刻度
for (let i = 0; i < 60; i++) { // 循环绘制60个刻度
ctx.save(); // 保存当前绘图状态
ctx.rotate(i * Math.PI / 30); // 旋转到对应位置
ctx.beginPath(); // 开始绘制路径
ctx.moveTo(0, -clockRadius + 10); // 移动到刻度起点
ctx.lineTo(0, -clockRadius + (i % 5 === 0 ? 30 : 20)); // 绘制刻度
ctx.strokeStyle = clockColor; // 设置刻度颜色
ctx.lineWidth = 2; // 设置刻度宽度
ctx.stroke(); // 绘制刻度
ctx.restore(); // 恢复绘图状态
}
// 获取当前时间
const now = new Date(); // 获取当前时间
const hours = now.getHours(); // 获取当前小时
const minutes = now.getMinutes(); // 获取当前分钟
const seconds = now.getSeconds(); // 获取当前秒
// 计算指针角度
const hourAngle = (hours % 12 + minutes / 60) * (Math.PI / 6); // 计算时针角度
const minuteAngle = (minutes + seconds / 60) * (Math.PI / 30); // 计算分针角度
const secondAngle = seconds * (Math.PI / 30); // 计算秒针角度
// 绘制时针、分针和秒针
drawHand(hourAngle, clockRadius * 0.5, 6, handColor); // 绘制时针
drawHand(minuteAngle, clockRadius * 0.7, 4, handColor); // 绘制分针
drawHand(secondAngle, clockRadius * 0.9, 2, 'red'); // 绘制秒针
}
function drawHand(angle, length, width, color) {
ctx.beginPath(); // 开始绘制路径
ctx.lineWidth = width; // 设置指针宽度
ctx.lineCap = 'round'; // 设置指针末端样式
ctx.strokeStyle = color; // 设置指针颜色
ctx.moveTo(0, 0); // 移动到中心点
ctx.rotate(angle); // 旋转到对应角度
ctx.lineTo(0, -length); // 绘制指针
ctx.stroke(); // 绘制路径
ctx.rotate(-angle); // 旋转回原始角度
}
resizeCanvas(); // 初始化时调整canvas尺寸
window.addEventListener('resize', resizeCanvas); // 监听窗口大小变化，调整canvas尺寸
setInterval(drawClock, 1000); // 每秒更新一次时钟
</script>
</body>
</html>
评论区
请登录后发表评论。