将CSS地图添加到画布

Question

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

我想将它添加到一个500x500px的画布元素，以便只显示1/2的地图。我有一个摄像头功能，将玩家置于画布中心并相对于玩家移动地图。

目标：将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); 
} 

有什么想法？

Answer 1

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

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

• 画布的风格为background: transparent;或<canvas-element>.style.background = 'transparent';。
• 画布应该位于纹理div的顶部。我会建议只确保canvas元素出现在DOM树/ HTML中的纹理元素之后，但如果那不是那么容易的话，样式也可以照顾到。我从来没有使用负Z指数，但他们应该工作。

我会建议在画布中进行贴图集渲染。很久以前，我一直在脚踏实地。欢迎您重复使用此旧项目中的任何代码：http://thorsummoner.github.io/old-html-tabletop-test/来源：https://github.com/thorsummoner/old-html-tabletop-test/blob/master/index.html