將CSS地圖添加到畫布

我正在創建自己的CSS地圖。該地圖是5x5，大小爲1000x1000px。將CSS地圖添加到畫布

我想將它添加到一個500x500px的畫布元素，以便只顯示1/2的地圖。我有一個攝像頭功能，將玩家置於畫布中心並相對於玩家移動地圖。

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

有什麼想法？

來源

2014-02-18 Growler

聽起來好像你正在產生一個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

來源

2014-02-18 01:47:57 ThorSummoner

爲什麼您建議不要使用css並使用拼貼集渲染？ – Growler

另外，你從哪裏得到這些瓷磚？你可能會花一些時間通過這個github代碼走過我嗎？（我真的很感謝你與我分享它btw） – Growler

它已經很長時間，因爲我已經看了那個代碼，函數'processmapfile'將png的複合顏色變成紅綠藍成爲sprie-map的tile xy，座標，就像那樣。 – ThorSummoner

將CSS地圖添加到畫布

回答

相關問題