HTML/CSS/JS:大型滚动和缩放平铺网格

HTML/CSS/JS: large, scrolling and zooming tile grid

本文关键字：缩放 网格 大型 CSS JS HTML 滚动      更新时间：2023-09-26

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

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

对此最简单的方法是什么？这不是我最感兴趣的项目部分，所以我想避免学习庞大的框架。

我非常愿意在元素上使用canvas和/或JS/CSS技术。

二维数组会有一些模式吗？会有什么图像吗？表示一些像自动机规则110或一些简单/半先进的图形画布是一个很好的选择，或者像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>
相关文章：