<style>
body {
text-align: center;
}
#canvas {
background-color: powderblue;
}
</style>
<body>
<canvas id="canvas" height="400px" width="400px"></canvas>
</body>
<script src="./test.js"></script>
let ctx = document.getElementById('canvas').getContext('2d');
function time() {
ctx.clearRect(0, 0, 400, 400)
ctx.beginPath();
ctx.arc(200, 200, 200, 0, 2 * Math.PI);
ctx.stroke();
for(let i = 0; i < 12; i++) {
ctx.beginPath();
ctx.lineWidth = 3;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(i / 6 * Math.PI);
ctx.moveTo(0, -175);
ctx.lineTo(0, -200);
ctx.stroke();
ctx.font = 'normal 12px Arial';
ctx.textAlign = 'center';
ctx.lineWidth = 1;
ctx.strokeText(`${i === 0 ? 12 : i === 6 ? 9 : i}`, 0, -160)
ctx.restore()
}
for(let i = 0; i < 60; i++) {
ctx.beginPath();
ctx.lineWidth = 2;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(i / 30 * Math.PI);
ctx.moveTo(0, -190);
ctx.lineTo(0, -200);
ctx.stroke();
ctx.restore()
}
let nowTime = new Date();
let hours = nowTime.getHours();
let minutes = nowTime.getMinutes();
let seconds = nowTime.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
hours = hours + minutes / 60;
minutes = minutes + seconds / 60;
ctx.beginPath();
ctx.lineWidth = 3;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(hours / 6 * Math.PI);
ctx.moveTo(0, -80);
ctx.lineTo(0, 0);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 2;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(minutes / 30 * Math.PI);
ctx.moveTo(0, -130);
ctx.lineTo(0, 0);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.save();
ctx.translate(200, 200);
ctx.rotate(seconds / 30 * Math.PI);
ctx.moveTo(0, -170);
ctx.lineTo(0, 0);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.save();
ctx.font = 'normal 14px Arial';
ctx.textAlign = 'center';
ctx.lineWidth = 1;
ctx.translate(200, 200);
ctx.strokeText(`${formatTime(nowTime.getHours())}:${formatTime(nowTime.getMinutes())}:${formatTime(nowTime.getSeconds())}`, 0, 80);
ctx.restore();
setInterval(time, 1000);
}
function formatTime(time) {
return time < 10 ? '0' + time : time;
}
time()
let canvasDom = document.getElementById('canvas')
let imageUrl = canvasDom.toDataURL('image/png')
let image = document.createElement('img')
image.src = imageUrl
document.body.appendChild(image)