代码实现：
<!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>
运行结果：
