Кажется, что clearRect () не работает во время анимации при использовании setInterval - PullRequest
Новая
       6

Кажется, что clearRect () не работает во время анимации при использовании setInterval

0 голосов
/ 19 октября 2019

Я пытаюсь заставить красные круги вращаться вокруг черного круга, но когда они начинают вращаться, они, кажется, не очищаются, и он просто рисует красный круг вокруг черного. Есть ли способ, которым я могу это исправить? 

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();
 }
<canvas id="myCanvas" width=400 height=400></canvas>
...