Question

我正在创建自己的CSS tilemap。 tilemap是5x5，大小为1000x1000px。

我想将它添加到500x500px画布元素中，以便只显示1/2的地图。我有一个相机功能，可以将播放器置于画布中心，并相对于播放器移动tilemap。

enter image description here

目标：将CSS Tilemap作为背景添加到HTML5画布中（即使CSS tilemap比画布大，也不应该重叠）

enter image description here

给定地图数组

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);  
}

有什么想法吗？

Answer 1

听起来你要生成一个div来包含每个图块的背景图像，你希望浏览器在画布后面渲染（画布半透明）？

之前我已经完成了divs-for-tiles，我建议反对它。但是，你应该能够实现你的要求。

画布的样式为background: transparent;或<canvas-element>.style.background = 'transparent';。
画布应位于纹理div的顶部。我建议只确保canvas元素出现在DOM树/ HTML中的纹理元素之后，但如果那不容易z-index样式也可以处理它。我从来没有使用过负z-indices，但它们应该可以工作。

我建议在画布中进行拼贴设置渲染。我很久以前就把这样的东西搭起来了。欢迎您重复使用此旧项目中的任何代码：http://thorsummoner.github.io/old-html-tabletop-test/来源：https://github.com/thorsummoner/old-html-tabletop-test/blob/master/index.html

将CSS tilemap添加到画布

1 个答案: