如何保持的z-index在畫布上通過選擇框

我建立一個牌桌上製造商，工作原理如下更新圖像時：如何保持的z-index在畫布上通過選擇框

頁面加載後，我打開一個牌桌上一個的部件逐之一。
最終用戶通過選擇框選擇他們的撲克桌上想要什麼類型的毛氈，扶手，身體或杯託。
當在選擇框中檢測到更改時，Image對象的src屬性也會更改。例如：如果用戶想要黑色感覺，我正在加載圖像：felts/black.png;那麼，如果他決定，它看起來勝於藍，頁面加載圖像毛氈/ blue.png

我的問題是這樣的：

只要他們改變了牌桌上的一個組成部分，該新圖像自動加載到其餘的頂部。

例如：如果我改變毛氈顏色，則毛氈的圖像將位於扶手圖像的頂部。

我想知道如何強制感覺圖像保持其Z指數的東西。

這裏是我的代碼：

var tableBody = new Image(); 
tableBody.onload = function() { 
    context.drawImage(tableBody, 0, 0); 
}; 

tableBody.src = "http://www.mcptables.com/images/buildyourtable/body/autumn-oak.png"; 

/* and it does the same thing for the other parts of the poker table... tableArmrest, tableFelt 
    tableCupholders, etc... */ 

$('#armrest').change(
function() { 
    switch($(this).val()) { 
     case "black": 
       tableArmrest.src = "http://www.mcptables.com/images/buildyourtable/armrest/black.png"; 
     break; 
     case "brown": 
       tableArmrest.src = "http://www.mcptables.com/images/buildyourtable/armrest/wood.png"; 
    } 
} 
)

你可以看到它在行動下頁：

http://mcptables.com/buildyourtable.html

下面是我的JS代碼的鏈接：

http://mcptables.com/js/pokertablebuilder.js

任何幫助將非常感謝！如果我想更改

來源

2013-04-25 ILikeTacos

您可以使用數組來確定應使用特定順序（Body first，然後是Armrest ...）重新加載哪個圖像。我不認爲在畫布上有任何像z-index的東西 – RelevantUsername 2013-04-25 12:14:49

我注意到如果我遵循，請您詳細說明一下嗎？ – ILikeTacos 2013-04-25 12:21:57

不幸的是，沒有辦法維護畫布上已經繪製的對象的z-index。你所能做的就是刪除所有內容並適當重繪。

有一些畫布框架可以解決這個問題，併爲開發人員提供畫布上單獨對象的「印象」。請參閱processing.js，raphael，kineticjs等

來源

2013-04-25 12:11:50 devnull69

無賴！我不知道。我將檢查這些框架，但我的猜測是，對於我的工具的範圍，它們可能不值得麻煩。謝謝一堆！ – ILikeTacos 2013-04-25 12:21:35

如何保持的z-index在畫布上通過選擇框

回答

相關問題