Как создать объекты круга и поместить их в массив?
Это домашнее задание. Мне нужно создать круги на холсте HTML5, чтобы при каждом щелчке создавался круг случайного цвета. Центр круга находится там, где был щелчок мышью. Однако, если новый созданный круг перекрывает любые другие круги, которые уже были нарисованы, эти круги исчезают, а новый круг остается. Эта логика с перекрытием, я думаю, у меня получится. У меня проблема в том, как отслеживать все круги, нарисованные на холсте?
(function(doc) {
var canvas = doc.getElementById("testCanvas");
var context = canvas.getContext("2d");
// Click event handler
canvas.onclick = function(e) {
// Creating array for circles
var circles = [];
// Creating a circle with random color and a given radius at the mouse click
var nextColor = randomColor();
context.fillStyle = nextColor;
context.beginPath();
context.arc(e.clientX, e.clientY, 30, 0, 2 * Math.PI);
context.fill();
context.closePath();
// Creating circle object
var circle = {
x_coord: e.clientX,
y_coord: e.clientY,
color: nextColor,
visible: true
};
// Pushing circle object into the array of circles
circles.push(circle);
//document.getElementById("demo").innerHTML = circles;
console.info(circles);
};
})(document);<canvas id = "testCanvas" />Сохраните все круги в массиве и пересечите новый круг с существующими в массиве. Как только они растрируются на холсте, вся информация о них теряется.
Ваш var circles = []; должен происходить за пределами прослушивателя кликов. Если он внутри, массив будет заменяться при каждом нажатии (и предыдущий круг будет забыт).
Кот, похоже, ты прав. Когда я использую console.info, я вижу столько массивов, сколько кликов на холсте...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Единственная реальная проблема, которую я видел с вашим кодом, заключается в том, что вы инициализируете массив кругов внутри обработчиком кликов. Это означает, что ваш массив кругов будет иметь максимальную длину, равную единице, поскольку он повторно инициализируется при каждом щелчке.
Вместо этого инициализируйте массив кругов один раз, переместив следующее за пределы обработчика кликов.
var circles = [];
Пример:
(function (doc) {
var canvas = doc.getElementById("testCanvas");
var context = canvas.getContext("2d");
// Creating array for circles
var circles = [];
// Click event handler
canvas.onclick = function (e) {
// Creating a circle with random color and a given radius at the mouse click
var nextColor = "black";
context.fillStyle = nextColor;
context.beginPath();
context.arc(e.clientX, e.clientY, 30, 0, 2 * Math.PI);
context.fill();
context.closePath();
// Creating circle object
var circle = {
x_coord: e.clientX, y_coord: e.clientY, color:
nextColor, visible: true
};
// Pushing circle object into the array of circles
circles.push(circle);
console.info(circles);
}
})(document);canvas {
width: 100vw;
height: 100vh;
}<canvas id = "testCanvas" />Спасибо! Это, казалось, решило проблему, с которой я столкнулся!
Функция randomColor() определена в отдельном файле js...