创建画布矩阵

Question

我试图创建一个画布矩阵，每个画布都是设备宽度和设备高度的大小。我们的想法是通过按下按钮从视图从画布移动到画布的位置。所以基本上你一次只能看到一个画布，而其他画布会在屏幕上向上/向下和向左/向右定位。

我对javascript和网页设计都很陌生，所以我不确定canvas元素是否是最好的方法。我没有任何代码可以展示，因为我刚刚开始这个项目，并且想要从开始就先要求它。

多幅画布的方法是一种好的方法，或者什么是更好的选择以及如何做到这一点？

谢谢！

Answer 1

这是一个很小的开始，让您开始了解如何动态制作canvas元素。您应该查看W3 Schools以获取有关如何编辑DOM元素的参考。 Create element in the 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，所以我建议你从一个画布开始简单。

我希望你能帮助你。