Как сделать несколько кругов с помощью Canvas JS

Question

У меня есть функция, которая делает круг, когда я нажимаю на кнопку, но если я продолжаю нажимать кнопку, он просто копирует круг в том же месте.Я пытаюсь найти способ сделать несколько кругов с разными позициями xy.У меня есть код ниже

function nerdsAssemble(){
  var canvas = document.getElementById("boop");
if (canvas.getContext)
  {
    var con=canvas.getContext("2d");
    var W=canvas.width / 2;
    var H=canvas.height / 2;
    var rad=45;
    con.beginPath();
    con.arc(W, H, rad, 0, 2 * Math.PI, false);
    con.stroke();
    }
  }
}

Answer 1

В данный момент вы помещаете круг в заранее определенное место:

var W=canvas.width / 2;
var H=canvas.height / 2;

Это центр элемента холста.В качестве примечания: имена переменных W и H немного вводят в заблуждение, поскольку соответствующие параметры функции arc () фактически являются позициями x и y,В любом случае, если вы хотите, чтобы круги располагались в произвольных позициях, вы можете использовать функцию Math.random () .Он возвращает случайное число от 0 до 1. Если вы умножите это на ширину / высоту холста, у вас будут круги по всему холсту.

function nerdsAssemble() {
  var canvas = document.getElementById("boop");
  if (canvas.getContext) {
    var con = canvas.getContext("2d");
    var W = Math.random() * canvas.width;
    var H = Math.random() * canvas.height;
    var rad = 45;
    con.beginPath();
    con.arc(W, H, rad, 0, 2 * Math.PI, false);
    con.stroke();
  }

}
document.getElementById("myButton").addEventListener("click", nerdsAssemble);

<canvas id="boop" width="400" height="300"></canvas>
<button id="myButton">
Circle
</button>

Продолжение

Если вы хотите, чтобы новые круги появлялись рядом друг с другом слева направо, нам нужно что-то изменить.Сначала нам нужны переменные, которые занимают положение круга.Давайте назовем эти xPosition и yPosition.Начальное значение xPosition должно быть 45. Почему 45?45 - это радиус круга, определяемый переменным радиусом с одинаковым именем, а горизонтальная позиция 45 означает, что мы касаемся левой стороны холста.

Теперь, если мы увеличиваем xPosition на радиус * 2 (90 - диаметр круга) после рисования круга следующий круг будет рядом с последним.

Вот некоторый код:

var canvas = document.getElementById("boop");
var radius = 45;
var xPosition = radius;
var yPosition = canvas.height / 2;
var con = canvas.getContext("2d");

function nerdsAssemble() {
  con.beginPath();
  con.arc(xPosition, yPosition, radius, 0, 2 * Math.PI, false);
  con.stroke();
  xPosition += radius * 2;
}
document.getElementById("myButton").addEventListener("click", nerdsAssemble);

<canvas id="boop" width="400" height="300"></canvas>
<button id="myButton">
Circle
</button>