Создание матрицы холстов

Question

Я пытаюсь создать матрицу холстов, каждый из которых будет размером устройства-ширины и устройства-высоты. Идея состоит в том, чтобы получить эту матрицу, из которой вид будет перемещаться с холста на холст нажатием кнопки. Таким образом, в основном вы будете видеть только один холст за раз, а другие будут располагаться вверх / вниз и влево / вправо за пределы экрана.

Я действительно новичок в javascript и webdesign, поэтому я не уверен, что элемент canvas - лучший способ сделать это вообще. У меня нет кода для показа, потому что я только начал этот проект и хотел сначала спросить, чтобы получить его прямо с самого начала.

Является ли подход с несколькими холстами хорошим вариантом или какой вариант лучше и как это сделать?

Спасибо!

Answer 1

Это небольшое начало, с которого вы можете начать с того, как динамически создавать элементы холста. Вам следует обратиться к W3 Schools за справкой о том, как редактировать элементы DOM. Создать элемент в DOM.

window.onload = function() {
  var canvasElements = [];
  var canvas1 = document.createElement("canvas");
  canvas1.id = "canvas1";
  canvasElements.push(canvas1);
}

Что вы хотите в своем решении

1) Создайте класс CSS с полной шириной и высотой страницы.

2) Динамически добавлять элементы холста на страницу с помощью манипуляций с JavaScript и DOM.

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

Надеюсь, это поможет вам.