圆圈和弧线是这样画的：
我把代码放codepen了，链接：https://codepen.io/cuteyangyang/pen/gOMwaLN
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.canvas-wrapper {
background: #666;
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<div class="canvas-wrapper">
<canvas id="my-canvas" width="300" height="150"></canvas>
</div>
<script>
var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
演示()
function 演示() {
开始绘制()
setTimeout(清除, 2100)
setInterval(function () {
开始绘制()
setTimeout(清除, 2100)
}, 3000)
}
function 开始绘制() {
画实心圆()
var 初始角度 = -0.5 * Math.PI
var 动画时间 = 2 // 秒
弧线动画(初始角度, 动画时间)
}
function 画实心圆() {
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.fillStyle = "#EC6CA5"
ctx.closePath()
ctx.fill()
}
function 弧线动画(初始角度, 动画时间) {
var 起始角度 = 初始角度
var 渲染间隔时间 = 1000 / 60 // 每秒60帧
var 每次增加角度 = 2 * Math.PI / ((动画时间 * 1000) / 渲染间隔时间)
var timer = setInterval(画弧线, 渲染间隔时间)
function 画弧线() {
结束角度 = 起始角度 + 每次增加角度
ctx.beginPath();
ctx.arc(100, 75, 50, 起始角度, 结束角度);
ctx.strokeStyle = "#ffffff"
ctx.lineWidth = 2
ctx.stroke()
起始角度 = 结束角度
if (结束角度 - 初始角度 >= 2 * Math.PI) {
clearInterval(timer)
}
console.log(结束角度)
}
}
function 清除() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
