代码实现：
<!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>
<body>
<!-- 1.设置canvas元素 -->
<canvas id="canvas" width="300" height="300"></canvas>
<script>
//半径
var radius =50;
//是否放大
var increase = true;
//radius<50 true radius>50 false true++ false--
//2.获取canvas画布
const canvas =document.getElementById("canvas");
const ctx =canvas.getContext("2d");
function draw(){
//清除指定矩形内图形
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.arc(100,100,radius,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle = "#6528e0";
ctx.fill();
if(radius>100){
increase = false;
}
else if(radius<50)
{
increase =true;
}
if(increase){
radius++;
}
else
{radius--;}
}
setInterval(draw,20)
</script>
</body>
</html>运行结果：
