Javascript 将CSS tilemap添加到画布

我正在创建自己的CSS tilemap。tilemap为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>');      
                }
            }
        }   
    }

如何将

#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来包含每个磁贴的背景图像，您希望浏览器在画布后面渲染它（画布是半透明的）

我以前做过瓷砖的div，我建议不要这样做。然而，你应该能够实现你的要求

• 画布具有样式

  背景：透明

  或

  .style.background='transparent'

• 画布应该位于纹理div的顶部。我建议只确保canvas元素出现在DOM树/HTML中的纹理元素之后，但如果这不容易

  z-index

  样式也可以处理。我从来没有使用过负z指数，但它们应该可以工作

---

我建议在画布中进行平铺集渲染。我很久以前就把这样的东西搭在一起了。欢迎您重新使用此旧项目中的任何代码：source:

为什么您不建议使用css而改用tile set呈现？另外，您从何处获得这些tile？你能花点时间让我浏览一下github代码吗？（我真的很感谢你和我分享它顺便说一句）我已经很久没有看过那段代码了，“processmapfile”函数将png的合成颜色红、绿、蓝变成了精灵地图的x-y、坐标、，类似的。

processmapfile

将png的合成颜色红绿蓝转换为精灵贴图或平铺贴图的平铺x-y索引

init_render

执行了一个循环，将平铺贴图中裁剪的平铺绘制到屏幕上。从我的资料中阅读不会太好，但我认为应该有一些片段可以让你在某种程度上领先。我建议你试着用你自己的方式重写我所做的事情。

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