Question

我想创建一个基本可视化二维数组的前端。它是一个大网格，足够大，当从远处观看时，这些图块可以归结为单个像素。

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

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

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

Answer 1

二维数组会有一些模式吗？将是任何形象或什么？代表一些像自动机规则110或一些简单/半高级图形画布是一个很好的选择或框架像KineticJS

Answer 2

此代码适用于画布

<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>

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

2 个答案: