畫布旋轉粒子

Question

你可能知道如何制作這種動畫。 我如何設法看到更多關於 canvas 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();

要完成效果，您將需要多個同心圓弧，向相反方向移動：

我在 circles[] 數組中放置了各個圓弧行為的值：

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”隨着頁面加載完成而淡出。 這不這樣做。