javascript - Canvas 颗粒拱门

Question

这是关于卡瓦斯动画的。 如何使我的粒子不是立方体而是圆形？ Codepen Link

CSS:

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas  {
  position: absolute;
  width: 100%;
  height: 100%;
  background:#000000;
}

JS

var cvs = document.createElement('canvas'),
    context = cvs.getContext("2d");
document.body.appendChild(cvs);

var numDots = 300,
    n = numDots,
    currDot,
    maxRad = 900,
    minRad = 100,
    radDiff = maxRad-minRad,
    dots = [],
    PI = Math.PI,
    centerPt = {x:0, y:0};

resizeHandler();
window.onresize = resizeHandler;

while(n--){
  currDot = {};
  currDot.radius = minRad+Math.random()*radDiff;
  currDot.radiusV = 0+Math.random()*200,
  currDot.radiusVS = (0.5-Math.random()*10)*0.00000005,
  currDot.radiusVP = Math.random()*0,
  currDot.ang = (1-Math.random()*2)*PI;
  currDot.speed = (1+Math.random()*0);
  //currDot.speed = 1-Math.round(Math.random())*2;
  //currDot.speed = 1;
  currDot.intensityP = Math.random()*PI;
  currDot.intensityS = Math.random()*0.0005;
  currDot.intensityO = 64+Math.round(Math.random()*64);
  currDot.intensityV = Math.min(Math.random()*255, currDot.intensityO);
  currDot.intensity = Math.round(Math.random()*255);
  currDot.fillColor = "rgb("+currDot.intensity+","+currDot.intensity+","+currDot.intensity+")";
  dots.push(currDot);
}

function drawPoints(){
  n = numDots;
  var _centerPt = centerPt,
      _context = context,
      dX = 0,
      dY = 0;

  _context.clearRect(0, 0, cvs.width, cvs.height);

  var radDiff;
  //draw dots
  while(n--){
    currDot = dots[n];
    currDot.radiusVP += currDot.radiusVS;
    radDiff = currDot.radius+Math.sin(currDot.radiusVP)*currDot.radiusV;
    dX = _centerPt.x+Math.sin(currDot.ang)*radDiff;
    dY = _centerPt.y+Math.cos(currDot.ang)*radDiff;

    //currDot.ang += currDot.speed;
    currDot.ang += currDot.speed*radDiff/400000;
    currDot.intensityP += currDot.intensityS;
    currDot.intensity = Math.round(currDot.intensityO+Math.sin(currDot.intensityP)*currDot.intensityV);

    //console.log(currDot);
    _context.fillStyle= "rgb("+currDot.intensity+","+currDot.intensity+","+currDot.intensity+")";;
    _context.fillRect(dX, dY, 2, 2);

  } //draw dot
  window.requestAnimationFrame(drawPoints);
}

function resizeHandler(){
  var box = cvs.getBoundingClientRect();
  var w = box.width;
  var h = box.height;
  cvs.width = w;
  cvs.height = h;
  centerPt.x = Math.round(w/2);
  centerPt.y = Math.round(h/2);
}

drawPoints();

谢谢大家

Answer 1

编辑

您没有正确配置颜色!当您渲染圆圈时，您设置了 fillStyle 和 StrokeStyle，并且由于您没有设置 StrokeStyle，因此圆圈不会渲染(查看白色背景的 Canvas )

在beginPath()之后，在.lines()命令之前，需要设置笔画:

_context.strokeStyle= "rgb("+currDot.intensity+","+currDot.intensity+","+currDot.intensity+")";

<小时/>

您已经在渲染正方形，这意味着您已经为每个对象生成了一个要占据的点。现在选择一个半径，可能很小，例如 1 或 2，然后使用 _context.arc 代替 _context.fillRect，像这样:

_context.beginPath(); 
_context.arc(dX, dY, 2, 0, 2 * Math.PI);
_context.stroke();

这会将正方形替换为半径为 2 的圆形(由第三个参数指定)