代码如下:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const w = canvas.width;
const h = canvas.height;
const x = w / 2;
const y = h / 2;
const radius = 30;
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, w, h);
let r = [3, 4, 4.5, 5, 6, 7];
let angle = [10, 25, 45, 65, 90, 120];
let alpha = [0.25, 0.35, 0.45, 0.65, 0.8, 1];
let x1 = [], y1 = [];
setInterval(function () {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, w, h);
x1 = [];
y1 = [];
for (let i = 0; i < r.length; i++) {
if (angle[i] >= 360) angle[i] = 0;
ctx.beginPath();
ctx.font = "1rem sans-serif";
ctx.fillStyle = "rgba(156,236,255," + alpha[i] + ")";
x1.push(x + radius * Math.cos((angle[i] * Math.PI) / 180));
y1.push(y + radius * Math.sin((angle[i] * Math.PI) / 180));
ctx.arc(x1[i], y1[i], r[i], 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();
angle[i] += 5;
}
}, 25);