带你使用canvas实现时钟
实现表盘
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
background: pink;
}
#clock {
background: blanchedalmond;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate3d(-50%, -50%, 0);
}
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
window.onload = function() {
var clock = document.querySelector("#clock");
if (clock.getContext) {
var ctx = clock.getContext("2d");
setInterval(() => {
ctx.clearRect(0, 0, clock.width, clock.height);
move();
}, 1000);
move();
function move() {
ctx.save();
ctx.lineWidth = 8;
ctx.strokeStyle = "black";
ctx.lineCap = "round";
ctx.translate(200, 200);
ctx.rotate(-90 * Math.PI / 180);
ctx.beginPath();
ctx.save();
ctx.strokeStyle = "#325FA2";
ctx.lineWidth = 14;
ctx.beginPath();
ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);
ctx.stroke();
ctx.restore();
ctx.save();
for (var i = 0; i < 12; i++) {
ctx.rotate(30 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(100, 0)
ctx.lineTo(120, 0);
ctx.stroke();
}
ctx.restore();
ctx.save();
ctx.lineWidth = 4;
for (var i = 0; i < 60; i++) {
ctx.rotate(6 * Math.PI / 180);
if ((i + 1) % 5 != 0) {
ctx.beginPath();
ctx.moveTo(117, 0)
ctx.lineTo(120, 0);
ctx.stroke();
}
}
ctx.restore();
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes() + s / 60;
var h = date.getHours() + m / 60;
h = h > 12 ? h - 12 : h;
ctx.save();
ctx.lineWidth = 14;
ctx.rotate(h * 30 * Math.PI / 180)
ctx.beginPath()
ctx.moveTo(-20, 0);
ctx.lineTo(80, 0);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.lineWidth = 10;
ctx.rotate(m * 6 * Math.PI / 180)
ctx.beginPath()
ctx.moveTo(-28, 0);
ctx.lineTo(112, 0);
ctx.stroke();
ctx.restore();
ctx.save()
ctx.lineWidth = 6;
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.rotate(s * 6 * Math.PI / 180)
ctx.beginPath();
ctx.moveTo(-30, 0);
ctx.lineTo(83, 0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 10, 0, 360 * Math.PI / 180);
ctx.fill();
ctx.beginPath();
ctx.arc(96, 0, 10, 0, 360 * Math.PI / 180);
ctx.stroke();
ctx.restore();
ctx.restore();
}
}
}
</script>
</html>
实现 分针 、秒针、时针
ctx.restore();
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes() + s / 60;
var h = date.getHours() + m / 60;
h = h > 12 ? h - 12 : h;
ctx.save();
ctx.lineWidth = 14;
ctx.rotate(h * 30 * Math.PI / 180)
ctx.beginPath()
ctx.moveTo(-20, 0);
ctx.lineTo(80, 0);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.lineWidth = 10;
ctx.rotate(m * 6 * Math.PI / 180)
ctx.beginPath()
ctx.moveTo(-28, 0);
ctx.lineTo(112, 0);
ctx.stroke();
ctx.restore();
ctx.save()
ctx.lineWidth = 6;
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.rotate(s * 6 * Math.PI / 180)
ctx.beginPath();
ctx.moveTo(-30, 0);
ctx.lineTo(83, 0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 10, 0, 360 * Math.PI / 180);
ctx.fill();
ctx.beginPath();
ctx.arc(96, 0, 10, 0, 360 * Math.PI / 180);
ctx.stroke();
ctx.restore();
ctx.restore();
}
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
background: pink;
}
#clock {
background: blanchedalmond;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate3d(-50%, -50%, 0);
}
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
window.onload = function() {
var clock = document.querySelector("#clock");
if (clock.getContext) {
var ctx = clock.getContext("2d");
setInterval(() => {
ctx.clearRect(0, 0, clock.width, clock.height);
move();
}, 1000);
move();
function move() {
ctx.save();
ctx.lineWidth = 8;
ctx.strokeStyle = "black";
ctx.lineCap = "round";
ctx.translate(200, 200);
ctx.rotate(-90 * Math.PI / 180);
ctx.beginPath();
ctx.save();
ctx.strokeStyle = "#325FA2";
ctx.lineWidth = 14;
ctx.beginPath();
ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);
ctx.stroke();
ctx.restore();
ctx.save();
for (var i = 0; i < 12; i++) {
ctx.rotate(30 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(100, 0)
ctx.lineTo(120, 0);
ctx.stroke();
}
ctx.restore();
ctx.save();
ctx.lineWidth = 4;
for (var i = 0; i < 60; i++) {
ctx.rotate(6 * Math.PI / 180);
if ((i + 1) % 5 != 0) {
ctx.beginPath();
ctx.moveTo(117, 0)
ctx.lineTo(120, 0);
ctx.stroke();
}
}
ctx.restore();
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes() + s / 60;
var h = date.getHours() + m / 60;
h = h > 12 ? h - 12 : h;
ctx.save();
ctx.lineWidth = 14;
ctx.rotate(h * 30 * Math.PI / 180)
ctx.beginPath()
ctx.moveTo(-20, 0);
ctx.lineTo(80, 0);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.lineWidth = 10;
ctx.rotate(m * 6 * Math.PI / 180)
ctx.beginPath()
ctx.moveTo(-28, 0);
ctx.lineTo(112, 0);
ctx.stroke();
ctx.restore();
ctx.save()
ctx.lineWidth = 6;
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.rotate(s * 6 * Math.PI / 180)
ctx.beginPath();
ctx.moveTo(-30, 0);
ctx.lineTo(83, 0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 10, 0, 360 * Math.PI / 180);
ctx.fill();
ctx.beginPath();
ctx.arc(96, 0, 10, 0, 360 * Math.PI / 180);
ctx.stroke();
ctx.restore();
ctx.restore();
}
}
}
</script>
</html>