画布旋转粒子

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”随着页面加载完成而淡出。 这不这样做。