javascript - 在金字塔图案中绘制圆的方法

Question

我想在 HTML Canvas 上以金字塔图案绘制圆球。

像这样:

Fiddle 在那里你可以告诉我算法:

https://jsfiddle.net/ofxmr17c/3/

var canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext('2d');

var balls = [];
var ballsLength = 15;

var Ball = function() {
	this.x = 0;
    this.y = 0;
    this.radius = 10;
};

Ball.prototype.draw = function(x, y) {
	this.x = x;
    this.y = y;
	ctx.fillStyle = '#333';
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
	ctx.fill();
	ctx.closePath();
};

init();

function init() {
	for (var i = 0; i < ballsLength; i++) {
    	balls.push(new Ball());
    }
    render();
}

function render() {
	for (var i = 1; i <= ballsLength; i++) {
    	if (i >= 1 && i <= 5) {
        	balls[i].draw(i * 20 + balls[i].radius, 20 + balls[i].radius);
        }
        
        if (i >= 6 && i <= 9) {
        	balls[i].draw(i * 20 + balls[i].radius, 20 + balls[i].radius * 2);
        }
        
        if (i >= 10 && i <= 12) {
        	balls[i].draw(i * 20 + balls[i].radius, 20 + balls[i].radius * 3);
        }
        
        if (i >= 13 && i <= 14) {
        	balls[i].draw(i * 20 + balls[i].radius, 20 + balls[i].radius * 4);
        }
        
        if (i == 15) {
        	balls[i].draw(i * 20 + balls[i].radius, 20 + balls[i].radius * 5);
        }
    }
    
	window.requestAnimationFrame(render);
}

canvas {
    border: 1px solid #333;
}

<canvas id="canvas"></canvas>

我有一个带有 x、y 和 radius 变量的 Ball 类:

var Ball = function() {
    this.x = 0;
    this.y = 0;
    this.radius = 10;
};

然后我有了在 Canvas 上绘制球的 Ball 类的方法:

Ball.prototype.draw = function(x, y) {
    this.x = x;
    this.y = y;
    ctx.fillStyle = '#333';
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.closePath();
};

我想创建将任意数量的球放入金字塔中的方法。

Answer 1

下面的现场演示展示了如何使用一些三 Angular 函数将任意数量的球打包成金字塔。要更改金字塔中的层数(以及球的数量)，请编辑 NUM_ROWS 变量。

完成后是这样的:

现场演示:

var canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext('2d');

var balls = [];
var ballsLength = 15;

var Ball = function() {
  this.x = 0;
  this.y = 0;
  this.radius = 10;
};

Ball.prototype.draw = function(x, y) {
  this.x = x;
  this.y = y;
  ctx.fillStyle = '#333';
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.closePath();
};

init();

function init() {
  for (var i = 0; i < ballsLength; i++) {
    balls.push(new Ball());
  }
  render();
}

function render() {
  var NUM_ROWS = 5;
  for (var i = 1; i <= NUM_ROWS; i++) {
    for (var j = 0; j < i; j++) {
      balls[i].draw(j * balls[0].radius * 2 + 150 - i * balls[0].radius, -(i * balls[0].radius * 2 * Math.sin(Math.PI / 3)) + 150);
    }
  }

  //window.requestAnimationFrame(render);
}

canvas {
    border: 1px solid #333;
}

<canvas id="canvas"></canvas>

JSFiddle 版本:https://jsfiddle.net/ofxmr17c/6/