javascript - 将CSS tilemap添加到 Canvas

我正在创建自己的CSS tilemap。 tilemap为5x5，尺寸为1000x1000px。

我想将其添加到500x500px的画布元素中，以便仅显示1/2的地图。我有一个摄像头功能，可将播放器居中放置在画布上，并相对于播放器移动tilemap。



目标：将CSS Tilemap作为背景放置在HTML5画布中（即使CSS tilemap比画布大，也不应有重叠）



给定地图数组

var mapArray = [
    [0, 0, 0, 0 ,0],
    [0, 1, 0, 0 ,0],
    [0, 0, 0, 0 ,0],
    [0, 0, 0, 0 ,0],
    [0, 0, 1, 1 ,0]
];

我这样绘制我的地图：

    function drawMap() {
        for (var i = 0; i < mapArray.length; i++) {
            for (var j = 0; j < mapArray[i].length; j++) {
                if (parseInt(mapArray[i][j]) == 0) {
                    $('#mapContainer').append('<div class="grass"></div>');
                }
                if (parseInt(mapArray[i][j]) == 1) {
                    $('#mapContainer').append('<div class="dirt"></div>');
                }
            }
        }
    }

CSS：我尝试将元素直接添加到HTML，并使用z-index: -1也许将tilemap推送到背景，但这没有用。

#mapContainer {
    height: 1000px;
    width: 1000px;
    position: relative;
    outline: 1px solid black;
    z-index: -1;
}

.grass {
    height: 200px;
    width: 200px;
    position: relative;
    float: left;
    background-color: green;
    z-index: -1;
}

.dirt {
    height: 200px;
    width: 200px;
    position: relative;
    float: left;
    background-color: tan;
    z-index: -1;
}

如何将#mapContainer元素添加到画布？我正在使用createJS，所以我尝试这样做：

function createWorld() {
    world = new createjs.Container();
    var htmlElement = document.createElement('div');
    htmlElement.id = 'mapContainer';
    var domElement = new createjs.DOMElement(htmlElement);
    world.addChild(domElement);
    stage.addChild(world);
}

有什么想法吗？

最佳答案

听起来您正在生成一个div，以包含每个图块的背景图像，您是否希望浏览器将其渲染到画布后面（画布是半透明的）？

我之前做过divs-for-tiles，建议您反对。但是，您应该能够实现您的要求。


画布的样式为background: transparent;或<canvas-element>.style.background = 'transparent';。
画布应位于纹理div的顶部。我建议仅确保canvas元素出现在DOM树/ HTML中的texture元素之后，但是如果那不容易，z-index样式也可以解决这一问题。我从未使用过负Z索引，但它们应该可以工作。


我建议在画布中进行图块集渲染。很久以前，我就把类似的东西放在架子上。欢迎您重用此旧项目中的任何代码：http://thorsummoner.github.io/old-html-tabletop-test/源：https://github.com/thorsummoner/old-html-tabletop-test/blob/master/index.html