Question

关于Cavas动画。如何让我的粒子不是立方体而是圆圈？ 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，所以圆圈无法渲染（请参见带有白色背景的画布））

在beginPath()之后，在.stroke()命令之前，您需要设置笔画：

_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的圆（用第3个参数指定）替换正方形

Answer 2

我不确定你想要什么，但是如果你想在HTML5画布上画一个圆圈，这就是代码：

context.beginPath();    
context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
context.stroke();

其中：

center（X，Y）是你在画布上的初始点（通过查看你的代码将是随机的）

半径是不言自明的，你可能希望它对你的情况来说很小

0是拱门的起始角度

（2 * Math.PI）是拱门的终点角度（以Pi表示），它将完成一个完整的圆圈

希望这有帮助！

帆布颗粒拱

2 个答案: