Html5时钟的实现
2024-12-17 19:40:17 来源: 阅读:
最近准备把自己的博客装修一下,首先,先为自己设计一个时钟吧,希望博客园能够尽快发放给我使用js的权限!
自从看见了苹果设计的那款因为侵权而赔钱了时钟,我就决定我的时钟一定是要参考这个来设计了!
不得不说,这是一个非常酷的设计!
准备工作
首先,定义一个Canvas
<div id="mineClock" style="position:relative;margin:0px auto"> <canvas id="canvas" style="background-color:#d7d7d7" width="244" height="300">您的浏览器不支持Canvas</canvas> </div>
开始绘制
绘制此时钟采取的思路是，利用js获取时间，然后将各个时间作为变量设置时针、分针、秒针的旋转角度以及位置，每秒钟刷新一次，然后就能得到一个很酷的模拟时钟！
<script>
var clock = document.getElementById('canvas');
var ctx = clock.getContext('2d');
function drawTime() {
ctx.clearRect(0, 0, 244, 300);
var date = new Date(); //获取当前时间
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var week = date.getDay();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = hour + min / 60;
hour = hour > 12 ? hour - 12 : hour;
var width = 244;
var height = 280;
var dot = { //时钟中心
x: width / 2,
y: width / 2,
radius: 4
}
var radius = 115;
var maxBorderWidth = 8;
var minBorderWidth = 2;
//绘制年月日
ctx.fillStyle = "#000";
ctx.font = "30px Lucida Sans Unicode";
month = eval(month + 1); //设置月份，月份得到的值为0·11，所以要加一得到实际值
var message = year + " 年" + month + " 月" + day;
ctx.fillText(message, 7, height);
//绘制时钟中心点
ctx.lineWidth = maxBorderWidth;
ctx.beginPath();
ctx.fillStyle = "#e2e2e2";
ctx.arc(dot.x, dot.y, radius, 0, 2 * Math.PI, true);
ctx.fill();
ctx.closePath();
//绘制时刻度、分刻度
for (var i = 0; i < 60; i++) {
ctx.save();
var pointLong;
if (i % 5 == 0) {
ctx.lineWidth = maxBorderWidth;
pointLong = 25;
}
else {
ctx.lineWidth = minBorderWidth;
pointLong = 12;
}
ctx.strokeStyle = "#000";
ctx.translate(dot.x, dot.y);
ctx.rotate(i * 6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -radius + maxBorderWidth);
ctx.lineTo(0, -radius + maxBorderWidth + pointLong);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
//绘制时针
ctx.save();
ctx.lineWidth = maxBorderWidth;
ctx.translate(dot.x, dot.y);
ctx.rotate(hour * 30 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -55);
ctx.lineTo(0, 25);
ctx.closePath();
ctx.stroke();
ctx.restore();
//绘制分针
ctx.save();
ctx.lineWidth = maxBorderWidth;
ctx.translate(dot.x, dot.y);
ctx.rotate(min * 6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -97);
ctx.lineTo(0, 25);
ctx.closePath();
ctx.stroke();
ctx.restore();
//绘制秒针
ctx.save();
ctx.strokeStyle = "red";
ctx.lineWidth = minBorderWidth;
ctx.translate(dot.x, dot.y);
ctx.rotate(sec * 6 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, -75);
ctx.lineTo(0, 25);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = '#D6231C';
ctx.arc(0, -75, 6, 0, 2 * Math.PI, true); //绘制秒针针尖的小圆点
ctx.fill();
ctx.closePath();
ctx.restore();
//装饰时钟中心 两个小圆叠加
ctx.beginPath();
ctx.fillStyle = '#982127';
ctx.arc(dot.x, dot.y, dot.radius, 0, 2 * Math.PI, true);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = '#D6231C';
ctx.arc(dot.x, dot.y, 2, 0, 2 * Math.PI, true);
ctx.fill();
ctx.closePath();
//再时钟上添加签名
ctx.fillStyle = "#000";
ctx.font = "15px Comic Sans MS";
ctx.fillText("Chal Mine", dot.x-30, dot.y+50);
}
setInterval(drawTime, 1000); //每秒刷新
</script>如果你拥有了博客园的js权限，那么你就可以将此时钟添加到博客园的侧边栏了！