效果圖展示：
代碼：
<!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 這一篇文章就夠了