javascript - 通过选择框更新图像时如何在 Canvas 中保留 z-index

Question

我正在构建一个扑克 table 制造商，其工作原理如下:

1. 当页面加载时，我会一一加载扑克 table 的组件。
2. 最终用户通过选择框选择他们的扑克 table 上想要什么样的毛毡、扶手、主体或杯架。
3. 当在选择框中检测到更改时，Image 对象的 src 属性也会更改。例如:如果用户想要黑色毛毡，我将加载图像:fels/black.png；然后，如果他认为蓝色看起来更好，页面会加载图像felts/blue.png

我的问题如下:

一旦他们更改了扑克牌 table 的一个元素，新图像就会自动加载到其余元素之上。

例如:如果我更改毛毡颜色，毛毡的图像将位于扶手图像的顶部。

我想知道如何强制毛毡图像保持其 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

任何帮助将不胜感激!如果我想改变

Answer 1

不幸的是，无法维护 Canvas 上已绘制对象的 z 索引。您所能做的就是删除所有内容并适本地重新绘制。

有一些 Canvas 框架可以处理这个问题，并为开发人员提供 Canvas 上单独对象的“印象”。请参阅processing.js、raphael、kineticjs 等