HTML5 canvas时钟钟表！

最新推荐文章于 2024-07-13 09:43:34 发布

MR·Feng

最新推荐文章于 2024-07-13 09:43:34 发布

阅读量490

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/weihaifeng163/article/details/73730401

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas时钟</title>
<style>
* { margin: 0; padding: 0; }
html,body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
#clock { position: absolute; background: #333; border-radius: 50%; transform: translate(-50%, -50%); left: 50%; top: 50%; }
</style>
</head>
<body>
<canvas width="500" height="500" id="clock"></canvas>
<script>
var clock = document.getElementById("clock");
var cxt = clock.getContext('2d');

function drawClock() {
cxt.clearRect(0, 0, 500, 500); //清除画布
//获取时间
var now = new Date(); //定义时间
var sec = now.getSeconds(); //获取秒
var minute = now.getMinutes(); //获取分钟
var hour = now.getHours(); //获取小时
//小时必须获取浮点类型，产生偏移（小时+分钟比）
hour = hour + minute / 60; ///将24小时转换为12小时
hour = hour > 12 ? hour - 12 : hour; //表盘（白色）
cxt.beginPath(); //画笔开始
cxt.lineWidth = 5; //设置画笔的线宽
cxt.strokeStyle = "#ddd"; //设置画笔的颜色
cxt.arc(250, 250, 200, 0, 360, false); //绘制圆形，坐标250,250 半径200，整圆（0-360度），false表示顺时针
cxt.stroke(); //绘图
cxt.closePath(); //结束画布
//刻度
//时针刻度
for(var i = 0; i < 12; i++) {
cxt.save(); //设置时针的样式
cxt.lineWidth = 6;
cxt.strokeStyle = "#fff"; //设置异次元空间原点
cxt.translate(250, 250); //设置旋转角度
cxt.rotate(i * 30 * Math.PI / 180);
cxt.fillStyle = "#fff"; //设置表盘数字的颜色
cxt.fillText(i + 1, 70, -125);
cxt.beginPath();
cxt.moveTo(0, -170); //画线，从坐标0，-170开始
cxt.lineTo(0, -190); //到坐标0，-190结束
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//分针刻度
for(var i = 0; i < 60; i++) {
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = "#fff";
cxt.translate(250, 250);
cxt.rotate(i * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -180);
cxt.lineTo(0, -190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时针
cxt.save(); //时针样式
cxt.lineWidth = 7;
cxt.strokeStyle = "#ff0";
cxt.translate(250, 250);
cxt.rotate(hour * 30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -140);
cxt.lineTo(0, 10);
cxt.stroke();
cxt.closePath();
cxt.restore(); //分针
cxt.save(); //分针样式
cxt.lineWidth = 5;
cxt.strokeStyle = "#ff0";
cxt.translate(250, 250);
cxt.rotate(minute * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -160);
cxt.lineTo(0, 15);
cxt.stroke();
cxt.closePath();
cxt.restore(); //秒针
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = "#f00";
cxt.translate(250, 250);
cxt.rotate(sec * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -185);
cxt.lineTo(0, 20);
cxt.stroke();
cxt.closePath(); //画出时针，分针，秒针交叉点
cxt.beginPath();
cxt.strokeStyle = "#f00";
cxt.arc(0, 0, 5, 0, 360, false);
cxt.fillStyle = "#ff0"; //填充颜色
cxt.fill(); //填充
cxt.stroke();
cxt.closePath(); //秒针装饰
cxt.beginPath();
cxt.strokeStyle = "#f00";
cxt.arc(0, -160, 5, 0, 360, false);
cxt.fill();
cxt.stroke();
cxt.closePath();
cxt.restore();
} //使用setinterval();让时钟动起来
drawClock();
setInterval(drawClock, 1000);
</script>
</body>
</html>