javascript - 动态排列三 Angular 形中的元素？

Question

我正在寻找一个 JS 函数来动态排列三 Angular 形中的元素，如下图所示:

元素的数量将取决于用户的选择，因此每次都会不同。我成功地完成了一个圆圈，但对于一个三 Angular 形似乎相当棘手。

Answer 1

试试这个:

function drawTriangle(ctx, sideLength) {
  var i = 0, direction = 1;

  ctx.save();
  ctx.strokeStyle = 'rgba(0, 0, 0, 1)';

  ctx.beginPath();

  ctx.moveTo(0, 0);
  for (; i < 3; i += 1) {
    ctx.rotate(Math.PI / -3);
    ctx.lineTo(direction * sideLength, 0);
    ctx.translate(direction * sideLength, 0);
    direction *= -1;
  }

  ctx.closePath();
  ctx.stroke();

  ctx.restore();
}

function drawCircle(ctx) {
  ctx.save();
  ctx.fillStyle = 'rgba(255, 0, 0, 1)';

  ctx.beginPath();
  ctx.arc(0, 0, 3, 0, 2 * Math.PI, true); 
  ctx.closePath();
  ctx.fill();

  ctx.restore();
}

function drawCircles(ctx, num, sideLength) {
  var stepLength = (sideLength * 3) / num, i = 0;

  ctx.save();
  for (; i < num; i += 1) {
    if ((stepLength * i) % sideLength === 0) {
      ctx.rotate(2 * Math.PI / 3);
    }

    drawCircle(ctx);
    ctx.translate(-stepLength, 0);
  }

  ctx.restore();
}

var
  canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  sideLength = 200;

if (ctx) {
  ctx.translate(50, 225);
  drawTriangle(ctx, sideLength);
  drawCircles(ctx, 14 * 3, sideLength);
}

演示:http://jsfiddle.net/ej2Kq/