实现效果如下:在线试一试
function loading2() {
const canvas2 = document.getElementById("myCanvas2");
const ctx2 = canvas2.getContext("2d");
const w = canvas2.width;
const h = canvas2.height;
ctx2.fillStyle = "#000";
ctx2.fillRect(0, 0, w, h);
let deg = 0;
let index = 0;
const draw = () => {
ctx2.clearRect(0, 0, 600, 600);
for (let i = 0; i < 36; i++) {
ctx2.save();
ctx2.beginPath();
ctx2.translate(w / 2, h / 2);
ctx2.rotate((deg * Math.PI) / 180);
ctx2.moveTo(0, 0);
ctx2.fillStyle = `rgba(24,144,255, ${(1 / 36) * i})`;
ctx2.arc(
0,
0,
30,
(i * 10 * Math.PI) / 180,
((i + 2) * 10 * Math.PI) / 180,
false
);
ctx2.closePath();
ctx2.fill();
ctx2.restore();
}
ctx2.save();
ctx2.beginPath();
ctx2.fillStyle = "#fff";
ctx2.arc(w / 2, h / 2, 20, 0, (360 * Math.PI) / 180, false);
ctx2.fill();
ctx2.closePath();
ctx2.fill();
ctx2.restore();
console.log("deg++", deg);
deg++;
if (deg >= 360) {
deg = 0;
}
requestAnimationFrame(draw);
};
draw();
}