clearRect()在setInterval动画中失效，红色圆弧旋转残留如何修复？

Let's break down why your animation is leaving a full red ring instead of rotating arcs, and fix it step by step!

Your Original Problem #

You're trying to make two red arcs spin around a black circle, but clearRect() doesn't seem to wipe the old arcs away—resulting in a full red ring over time. Here's your original code for reference:

HTML

<canvas id="myCanvas" width=400 height=400></canvas>

JavaScript

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var Spin = 0; 
var spinred = window.setInterval(MiddleCircles, 10); 
function MiddleCircles(){ 
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); 
    ctx.beginPath(); 
    ctx.arc(325, 325, 51, Spin, Spin+0.5*Math.PI); 
    ctx.strokeStyle = "#FF0000"; 
    ctx.lineWidth = "10"; 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.arc(325, 325, 51, Spin + 1*Math.PI, Spin + 1.5*Math.PI); 
    ctx.strokeStyle = "#FF0000"; 
    ctx.lineWidth = "10"; 
    ctx.stroke(); 
    Spin += 0.01; 
    ctx.beginPath(); 
    ctx.arc(325, 325, 50, 0, 360); 
    ctx.fillStyle = "black"; 
    ctx.fill(); 
    ctx.stroke(); 
    console.log(); 
} 

What's Going Wrong? #

1. clearRect() is targeting the wrong dimensions
   You used myCanvas.width and myCanvas.height, but myCanvas is just the element's ID—unless you declared it as a global variable, this doesn't reference the actual canvas element. Since you already stored the canvas in c, you need to use c.width and c.height to clear the entire canvas properly.

2. Backwards drawing order
   You're drawing the red arcs first, then the black circle. The black circle covers the inner part of the arcs, but the outer half (5px, since your line width is 10) sticks outside the black circle's radius of 50. If clearRect() isn't working, these outer bits build up into a ring. We need to draw the black circle first, then the arcs on top.

3. Incorrect full circle angle
   Canvas arc() uses radians, not degrees. Using 360 as the end angle draws way more than a full circle (360 radians = ~57 full rotations!). Use Math.PI * 2 instead for a proper full circle.

4. Unnecessary string for lineWidth
   While JavaScript will convert "10" to a number, it's cleaner to use numeric values directly for canvas properties.

Fixed Code #

Here's the corrected version that works as expected:

JavaScript

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var Spin = 0; 
var spinred = window.setInterval(MiddleCircles, 10); 

function MiddleCircles(){ 
    // Clear the entire canvas with the correct element dimensions
    ctx.clearRect(0, 0, c.width, c.height); 

    // Draw black circle first (stays behind the arcs)
    ctx.beginPath(); 
    ctx.arc(325, 325, 50, 0, Math.PI * 2); // Proper radians for full circle
    ctx.fillStyle = "black"; 
    ctx.fill(); 

    // Draw first red arc
    ctx.beginPath(); 
    ctx.arc(325, 325, 51, Spin, Spin + 0.5 * Math.PI); 
    ctx.strokeStyle = "#FF0000"; 
    ctx.lineWidth = 10; // Numeric value
    ctx.stroke(); 

    // Draw second red arc
    ctx.beginPath(); 
    ctx.arc(325, 325, 51, Spin + Math.PI, Spin + 1.5 * Math.PI); 
    ctx.strokeStyle = "#FF0000"; 
    ctx.lineWidth = 10; 
    ctx.stroke(); 

    // Update rotation after drawing the arcs
    Spin += 0.01; 
} 

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

Why This Works #

• clearRect() now correctly wipes the entire canvas every frame, so old arcs don't linger.
• Drawing the black circle first ensures it hides the inner part of the arcs, creating the "rotating arcs around a circle" effect you want.
• Using Math.PI * 2 avoids weird extra rotations for the black circle.
• Updating Spin after drawing the arcs ensures each frame renders the arcs at the correct position before advancing the rotation.

内容的提问来源于stack exchange，提问作者tj bob