Javascript HTML/CSS/JS：大的、滚动和缩放的平铺网格

我想创建一个前端，基本上可视化一个二维数组。这是一个大的网格，足够大，当从远处看时，瓷砖可能会缩小到单个像素

我想实现缩放和2d滚动来导航表示（只不过是彩色方块）

最简单的方法是什么？这不是我最感兴趣的项目部分，因此我希望避免学习大型框架

---

我非常愿意在元素上使用

canvas

和/或

JS/CSS

技术。

二维数组将有一些模式？会有图像或什么吗？为了表示一些像automata rule110或一些简单/半高级图形画布之类的内容，对于KineticJS之类的框架来说，这是一个很好的选择

<canvas id="canvas"></canvas>
<script>
var arr = new Array(new Array(1,2,3), new Array(1,2,1), new Array(2,3,1));
var ctx = document.getElementById("canvas").getContext("2d");
var size = 10;
for(var i=0; i< 3;i++){
    for(var j=0; j< 3;j++){
        if(arr[i][j]==1){
        ctx.fillStyle = "red";
        }else if(arr[i][j]==2) {
        ctx.fillStyle = "blue";
        }else if(arr[i][j]==3){
        ctx.fillStyle = "green";
        }

        ctx.fillRect(i*(size+1),j*(size+1),size,size);
    }
}
</script>

var arr=新数组（新数组（1,2,3）、新数组（1,2,1）、新数组（2,3,1））；
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
变量大小=10；
对于（变量i=0；i<3；i++）{
对于（var j=0；j<3；j++）{
如果（arr[i][j]==1）{
ctx.fillStyle=“红色”；
}else如果（arr[i][j]==2）{
ctx.fillStyle=“蓝色”；
}否则如果（arr[i][j]==3）{
ctx.fillStyle=“绿色”；
}
ctx.fillRect（i*（尺寸+1），j*（尺寸+1），尺寸，尺寸）；
}
}

它只是一个普通的二维数组，整数的范围为

0:3

左右，由彩色正方形表示。是否要在表格中表示二维数组？2d数组中的每个值都表示某种颜色？是。我没有说

表

，因为我不想暗示使用实际的

，而让事情悬而未决