TheSnegok
@TheSnegok

Почему canvas рисует неправильные пропорции?

JS:
// Размер сетки
const gridSize = 10;
// Размер одной клетки
const cellSize = 45;
// Размер входного сигнала (100)
const inputSignul = gridSize * gridSize;
// Массив для хранения текущего состояния картинки в левом канвасе,
// он же является входным сигналом сети
const imageStateArray = [];
// Для обработки движений мыши по канвасу
const isDrawing = false;
// Инициализация состояния
for (let i = 0; i < inputSignul; i += 1) {
	imageStateArray[i] = -1;
}
// Получаем контекст канвасов:
const userCanvas = document.querySelector(".canvas1"),
	userContext = userCanvas.getContext("2d"),
	netCanvas = document.querySelector(".canvas2"),
	netContext = netCanvas.getContext("2d");
// Функция принимает контекст канваса и рисует
// сетку в 100 клеток (gridSize * gridSize)
const drawGrid = (ctx) => {
	ctx.beginPath();
	ctx.fillStyle = "white";
	ctx.lineWidth = 3;
	ctx.strokeStyle = "black";
	for (let row = 0; row < gridSize; row += 1) {
		for (let column = 0; column < gridSize; column += 1) {
			const x = column * cellSize;
			const y = row * cellSize;
			ctx.rect(x, y, cellSize, cellSize);
			ctx.fill();
			ctx.stroke();
		}
	}
	ctx.closePath();
};
drawGrid(userContext);

CSS:
canvas {
    width: 450px;
    height: 450px;

}

Задаю 450px для canvas, но при рисовании квадратиков они выходят не 45 на 45, а ширина 45, а высота больше, почему так?
Вот что рисует:
611b91aed53a2264630312.png
А вот что должно:
611b923b1617c133390147.png
  • Вопрос задан
  • 179 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Не показали HTML-разметку. Где там элемент canvas, с какими атрибутами?
По умолчанию у элемента размеры 300х150. Стилями вы его растягиваете до 450х450, вот он и вытягивается, изумлённо, по вертикали.

Поможет указать размер: <canvas width="450" height="450"></canvas>

p.s. толщина линий по краям canvas будет вполовину меньше от остальных, т.к. пол-линии оказывается за кадром.
Иллюстрация
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 18:19
20000 руб./за проект
29 мар. 2024, в 18:08
2500 руб./за проект
29 мар. 2024, в 17:51
40000 руб./за проект