<!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>
</head>
<style>
canvas {
border: 1px solid;
}
</style>
<body>
<canvas width="600" height="600"></canvas>
</body>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.translate(300, 300);
ctx.arc(0, 0, 200, 0, 2 * Math.PI);
ctx.lineWidth = "5";
ctx.stroke();
ctx.closePath();
fn = (a, b, c) => {
ctx.beginPath();
ctx.save();
ctx.rotate((b * i * Math.PI) / 180);
ctx.moveTo(200, 0);
ctx.lineTo(a, 0);
ctx.lineWidth = `${c}`;
ctx.stroke();
ctx.restore();
ctx.closePath();
};
for (var i = 1; i <= 60; i++) {
if (i == 0 || i % 5 == 0) {
fn(180, 30, 6);
} else {
fn(190, 6, 2);
}
}
ctx.textAlign = "center";
ctx.font = "20px 宋体";
ctx.fillText("Daniel Wellington", 0, -100);
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fillStyle = "tomato"
ctx.fill()
</script>
</html>
