Отрисовка прямоугольников

@ds102061 · Регистрация: 13.10.2010

Студворк — интернет-сервис помощи студентам

Всем привет. Добавила отрисовку прямоугольников, но почему то в браузере показывает обрезанное

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.addEventListener('DOMContentLoaded', () => {
            let canvas = document.createElement('canvas');
            //body.style.width  = 100%;
            //body.style.height = '800px';
            let ctx = canvas.getContext("2d");
            let x = 10; y = 10, len = 100, weg = 100;
            for (let i = 1;  i <= 4; i++) {
                for (let j = 1; j <= 4; j++) {                                    
                    ctx.rect(i * x + (i - 1) * len  , j * y + (j - 1) * weg, len, weg);
                    ctx.stroke();
                    document.body.append(canvas);
                }
            }
           
        }

так же создала массив с числами, каждое значение должно быть привязано к каждому прямоугольнику

JavaScript
1
2
3
4
5
6
7
8
9
function createNumbersArray(count) {
        let arr = [];
 
        for (let x = 1; x < count+1; x++) {
            arr.push(x);
            arr.push(x);
        }
        return arr;
    }

не знаю как прикрепить к каждому прямоугольнику свое значение из массива

@voraa · 13.03.2024, 21:12

Сообщение от ds102061

но почему то в браузере показывает обрезанное

Потому, что, если не заданы размеры canvas, то они будут 300х150.

@ds102061 · 15.03.2024, 09:07 **[ТС]**

есть массив с данными

JavaScript
1
 arr = [1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8]

добавила отрисовку, но прописывает значение с массива как то криво

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let canvas = document.createElement('canvas');
            canvas.width  = 1000;
            canvas.height = 800;
            let ctx = canvas.getContext("2d");
            let x = 10; y = 10, len = 100, weg = 100;
            for (let a = 0; a < arr.length; a++) {
                for (let i = 1;  i <= 4; i++) {
                    for (let j = 1; j <= 4; j++) {                                    
                        ctx.rect(i * x + (i - 1) * len  , j * y + (j - 1) * weg, len, weg);
                        ctx.stroke();
                        ctx.font = "125px Arial" ;
                        ctx.fillText(arr[a], i * x + (i - 1) * len + 10, j * y + (j - 1) * weg + 50, 50 )
                        document.body.append(canvas);
                    }
                }
            }

@rr33rr · 17.03.2024, 05:32

Сообщение от ds102061

добавила отрисовку, но прописывает значение с массива как то криво

А чего вы ожидали?
Так лучше?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let arr = [1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8];
let canvas = document.createElement('canvas');
canvas.width  = 1000;
canvas.height = 800;
let ctx = canvas.getContext("2d");
let x = 10; y = 10, len = 100, weg = 100, a = 0;
for (let i = 0;  i < 4; i++) {
  for (let j = 0; j < 4; j++) {                                    
    ctx.rect((i + 1) * x + i * len  , (j + 1) * y + j * weg, len, weg);
    ctx.stroke();
    ctx.font = "40px Arial" ;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    a = i + j * 4;
    ctx.fillText(arr[a], (i + 1) * x + i * len + 50, (j + 1) * y + j * weg + 50)
  }
}
document.body.append(canvas);

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .