在線試一試，查看效果

代碼如下：

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);