效果图展示：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆周运动3</title>
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="400" height="600">
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
//移动坐标系使旋转中心点位于画布中心
context.translate(200, 200);
var cnt = 0
//画小球
function draw(everyPer) {
var x = 100 * Math.cos(everyPer);
var y = 100 * Math.sin(everyPer);
context.beginPath();
context.fillStyle = "blue";
context.arc(x, y, 10, 0, Math.PI * 2);
context.fill();
context.fillStyle = "#000000"; //颜色
context.font = "normal 10px 微软雅黑"; //字体
context.textBaseline = "middle"; //竖直对齐
context.textAlign = "center"; //水平对齐
context.fillText(cnt, x, y, 10); //绘制文专字
}
var everyPer = 0;
function act() {
//清空画布
context.clearRect(-200, -200, canvas.width, canvas.height);
draw(everyPer);
everyPer += Math.PI / 60;
cnt++
console.log(`everyPer${everyPer}`)
if (everyPer >= 2) {
clearInterval(timer)
}
}
var timer = setInterval(act, 1000)
</script>
</html>
参考博客：
1.https://segmentfault.com/a/1190000008417444 ---《每周一点canvas动画》——圆周运动
2.https://www.jianshu.com/p/6d69e1aa1f54 ---- canvas圆周运动三种方法
3.https://blog.csdn.net/u011423258/article/details/81322334 --- 使用canvas制作一个圆环倒计时
4.https://www.runoob.com/w3cnote/html5-canvas-intro.html---- 学习 HTML5 Canvas 这一篇文章就够了