キャンバス回転粒子

Question

あなたはこの種のアニメーションの作成方法を知っていますか？ どのように私はキャンバスのjavascript技術についてもっと多くの言葉を見ることができた。

http://cuberto.com/

あなたは

Answer 1

ここで周りと回って青い背景上の単一の円弧ですありがとうございました。これは、青色の背景に白い円弧を描くことによって実現されます。

フィドル：

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

効果を完了するには、反対方向に走行する、複数の同心の円弧が必要になります。

私は[丸内の個々のアークの挙動の値を配置]アレイ：

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

ここで欠落しているのは、適切な瞬間に回転サークルを「C」に揃えるための芸術的なフレアです。私はまた、あなたが提供した例の 'C'は、ページロードが完了するとフェードアウトすることも確認しています。これはそうしない。