Нужна помощь, чтобы нарисовать несколько шариков внутри прямоугольника на холсте

Question

Мне нужно нарисовать несколько шариков внутри прямоугольника. У меня есть прямоугольник и 4 информации. Ширина и высота прямоугольника. Количество шариков в строке и количество строк. Сказано, что я должен нарисовать, например, 4 шара на одной линии. начиная с углов (что я смог сделать), но я не могу понять, как нарисовать более 2 шаров, например: если у меня есть 3 шара, мне нужно нарисовать 2 в углах и 1 в середине, еслиУ меня 4 мяча ... 2 по углам и 2 по центру. У меня была идея думать о прямоугольнике как о матрице, но мне не повезло .. ссылка, чтобы понять, что я имею в виду

Answer 1

Если вам нужно нарисовать, например, n драконьих шаров на линии, то вы можете разделить длину на n + 1, чтобы получить расстояние между центрами шаров, или, если вы хотите различное смещение в начале и в конце, то вы должны делить (ширина - 2* смещение) / (n - 1).

<canvas id="canvas" width="300" height="100">
</canvas>

<script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    class Rect {
        constructor(x, y, width, heght) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.heght = heght;
        }
    }

    class Circle {
        constructor(x, y, radius) {
            this.x = x;
            this.y = y;
            this.radius = radius;
        }
    }

    class Scene
    {
        constructor() {
            this.items = [];
        }
        clear() {
            this.items = [];
        }
        add(item) {
            this.items.push(item);
        }
        draw(ctx) {
            for(let item of this.items) {
                if (item instanceof Rect) {
                    ctx.beginPath();
                    ctx.rect(item.x, item.y, item.width, item.heght);
                    ctx.stroke();
                } else if (item instanceof Circle) {
                    ctx.beginPath();
                    ctx.arc(item.x, item.y, item.radius, 0, 2 * Math.PI);
                    ctx.stroke();
                }
            }
        }
    }

    const scene = new Scene();
    scene.clear();
    scene.add(new Rect(0, 0, 300, 100));

    let n = 5;
    let offset = 30;
    let spacing = ((300 - 2 * offset ) / (n - 1));

    for (let i = 0; i < n; i++) {
        scene.add(new Circle(i * spacing + offset, 50, 25))
    }
    scene.draw(ctx);

</script>

Answer 2

Мне понравилось, и я сейчас им пользуюсь ... хотя у меня проблемы с попыткой расположить шары внутри моего розыгрыша ... посмотри, что я получил так далеко, и если у тебя есть немного больше времени, чтобы дать мнерука в этом <3 (мне нужно поместить шары внутри третьего прямоугольника, независимо от того, какую ширину или высоту вводит пользователь) </p>

    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        scene.clear();

        context.beginPath();
        context.strokeRect(zoomedX(0), zoomedY(0), zoomed(width), zoomed(height));
        context.strokeRect(zoomedX(55), zoomedY(55), zoomed(width-10), zoomed(height-10));
        context.strokeRect(zoomedX(60), zoomedY(60), zoomed(width-20), zoomed(height-20));
        context.closePath();

        let radius    = 8;
        let n         = 3;
        let lines     = 3;
        let offset    = 68;
        let offsetY   = 68;
        let spacing   = ((width - 2 * offset ) / (n - 1));
        let spacingY  = ((height - 2 * offset ) / (lines - 1));

        for (let i = 0; i < n; i++) {
            for(let j = 0; j < lines ;j++){
                scene.add(new Circle(i * spacing + offset, j * spacingY + offset, radius))
            }
        }

        scene.draw(context);
    }