使用H5新特性的画布功能实现一个时钟:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas {
border: 1px solid;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas width="150" height="150" id="canvas"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext('2d');
ctx.translate(75, 75);
ctx.rotate(-Math.PI / 2); //逆时针旋转九十度
ctx.lineCap = "round";
ctx.save();
clock();
//绘制小时刻度
function clock() {
ctx.clearRect(-75, -75, 150, 150);
ctx.fillStyle = 'pink';
ctx.fill();
ctx.fillRect(-75, -75, 150, 150);
var date = new Date();
ctx.lineWidth = 3 //设置线条宽度
for (var i = 0; i < 12; i++) {
ctx.beginPath()
ctx.rotate(Math.PI / 6)
ctx.moveTo(68, 0)
ctx.lineTo(75, 0)
ctx.stroke()
}
//绘制分钟
ctx.lineWidth = 2 //设置线条宽度
for (var i = 0; i < 60; i++) {
ctx.beginPath();
if (i % 5 != 0) {
ctx.moveTo(72, 0)
ctx.lineTo(75, 0)
ctx.stroke()
}
ctx.rotate(Math.PI / 30);
}
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
console.log(hour, min, sec);
//绘制时针
ctx.restore();
ctx.save();
ctx.lineWidth = 5;
hour > 12 ? hour - 12 : hour;
ctx.rotate((Math.PI / 6) * (hour + min / 60 + sec / 3600));
ctx.beginPath();
ctx.moveTo(-10, 0);
ctx.lineTo(40, 0);
ctx.stroke();
//绘制分针
ctx.restore();
ctx.save();
ctx.lineWidth = 3;
ctx.rotate((Math.PI / 30) * (min + sec / 3600));
ctx.beginPath();
ctx.moveTo(-10, 0);
ctx.lineTo(60, 0);
ctx.stroke();
//绘制秒针
ctx.restore();
ctx.save();
ctx.lineWidth = 3;
ctx.rotate((Math.PI / 30) * (sec));
ctx.beginPath();
ctx.moveTo(-10, 0);
ctx.lineTo(60, 0);
ctx.strokeStyle = 'red';
ctx.stroke();
//在原点出绘制小红原点
ctx.beginPath();
ctx.arc(0, 0, 5, 0, 2 * (Math.PI));
ctx.fillStyle = "red";
ctx.fill();
//在秒针末端绘制小红圆圈
ctx.beginPath();
ctx.arc(65, 0, 5, 0, 2 * (Math.PI));
ctx.fillStyle = 'red';
ctx.fill();
ctx.restore();
}
setInterval(function() {
clock();
}, 1000);
</script>
</body>
</html>