Canvas rotierende Partikel

Question

Kannst du jemand wissen, wie man diese Art von Animation macht. Wie ich es geschafft habe, mehr über eine Leinwand JavaScript-Technik zu sehen.

http://cuberto.com/

Danke

Answer 1

Hier ist ein einzelner Bogen auf einem blauen Hintergrund um und um gehen. Dies wird durch Zeichnen eines weißen Bogens auf blauem Hintergrund erreicht.

Fiddle:

https://jsfiddle.net/07d69v39/1/

//coordinates of rectangle 
    var xp = 125; 
    var yp = 125; 
    var radius = 45; 

    //How far to move the arc each time: 
    var angleStep = Math.PI * 0.1; 
    //How often to move the arc: 
    var stepTime = 50; 
    var currentStep = 0; 

function doDraw() { 
    var can = document.getElementById("myCanvas"); 
    can.width = 250; 
    can.height = 250; 
    var context = can.getContext("2d"); 

    //Erase the canvas by painting it blue: 
    context.fillStyle="#0000FF"; 
    context.fillRect(0, 0, 250, 250); 

    //Set the drawing color to white: 
    context.strokeStyle="#FFFFFF"; 
    context.lineWidth=5; 
    context.arc(xp, yp, radius, 0 + currentStep, 1.5*Math.PI + currentStep); 
    context.stroke(); 

    //Make sure to maintain the currentStep angle so it doesn't overflow: 
    currentStep = currentStep + angleStep; 
    if (currentStep>Math.PI * 2) { 
    currentStep = currentStep - Math.PI * 2; 
    } 

    //Wait, and then call this function again to animate: 
    setTimeout(function() { 
    doDraw(); 
    }, stepTime); 

} 

doDraw(); 

Um den Effekt zu vervollständigen, werden Sie mehrere konzentrische Bögen müssen, in entgegengesetzte Richtungen bewegen:

I-Werte für einzelne Bogenverhalten in den Kreisen platziert [ ] Array:

https://jsfiddle.net/07d69v39/3/

//coordinates of rectangle 
    var xp = 125; 
    var yp = 125; 

    var circles = [ 
    { 
     radius: 45, 
     step: 0, 
     direction: true, 
     speed: Math.PI * 0.1, 
    }, 
    { 
     radius: 42, 
     step: 0, 
     direction: false, 
     speed: Math.PI * 0.05 
    }, 
    { 
     radius: 39, 
     step: 0, 
     direction: true, 
     speed: Math.PI * 0.07 
    }, 
    { 
     radius: 36, 
     step: 0, 
     direction: false, 
     speed: Math.PI * 0.02 
    }, 
    { 
     radius: 33, 
     step: 0, 
     direction: true, 
     speed: Math.PI * 0.06 
    }, 
    { 
     radius: 30, 
     step: 0, 
     direction: false, 
     speed: Math.PI * 0.04 
    } 
    ]; 

    //How often to move the arc: 
    var stepTime = 50; 

function doDraw() { 
    var can = document.getElementById("myCanvas"); 
    can.width = 250; 
    can.height = 250; 
    var context = can.getContext("2d"); 
    context.imageSmoothingEnabled= true; 

    //Erase the canvas by painting it blue: 
    context.fillStyle="#0000FF"; 
    context.fillRect(0, 0, 250, 250); 

    //Set the drawing color to white: 
    context.strokeStyle="#FFFFFF"; 
    context.lineWidth = 4; 

    for (var i = 0; i<circles.length;i++) { 
    var arc = circles[i]; 
    maintainArc(context, arc); 
    } 

    //Wait, and then call this function again to animate: 
    setTimeout(function() { 
    doDraw(); 
    }, stepTime); 

} 

function maintainArc(context, arc) { 
    var radius = arc.radius; 
    var step = arc.step; 
    context.beginPath(); 
    context.arc(xp, yp, radius, 0 + step, 1.5*Math.PI + step); 

    context.stroke(); 


    //maintain the step angle differently for clockwise and counter clockwise 
    if (arc.direction) { 
    step = step + arc.speed; 
    if (step>Math.PI * 2) { 
     step = step - Math.PI * 2; 
    } 
    } else { 
    step = step - arc.speed; 
    if (step<Math.PI * 2) { 
     step = step + Math.PI * 2; 
    } 
    } 
    arc.step = step; 
}  

doDraw(); 

Was jetzt fehlt, ist ein künstlerisches Aufflackern, um die rotierenden Kreise im richtigen Moment in ein "C" zu bringen. Ich sehe auch, dass das "C" in dem Beispiel, das Sie zur Verfügung gestellt haben, ausgeblendet wird, wenn die Seite geladen wird. Das macht das nicht.