javascript - 如何控制 Canvas 对象的 z-index？

Question

当我在 Canvas 上绘制一些对象时，有时新对象会放在旧对象下面。例如，我将一些图像添加到 Canvas ，然后画一条线。当我运行代码时，图像位于行首。我在网上搜索了解决方案。但是没有直接的解决方案。 :( 在某些情况下，它被视为一个错误!在浏览器中。我如何控制 z-index？

编辑:这是我的代码

<img id="black_checkers_piece" src="egsdk/BlackCheckersPiece.png" style="display: none;">
<canvas id="c1" style="border:1px solid #998800"></canvas>
<script type="text/javascript">
var canvasID = document.getElementById('c1');
var ctx = canvasID.getContext('2d');
var img = new Image();
img.src = document.getElementById('black_checkers_piece').src;
img.onload = function(){
ctx.drawImage(img, 10, 10, 32, 32);
}
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(0, 0);
ctx.lineTo(50, 50);
ctx.stroke();
</script>

Answer 1

您很可能在绘制图像之前等待图像加载。

此外，您可能会尽快画线。

您需要等待所有图像加载完毕，然后按照您想要的顺序(从最远的 z 顺序到最近的顺序)绘制所有内容。在加载所有图像之前不要绘制任何东西，否则您的 z 顺序将不正确。

如果您想在加载所有图像之前在屏幕上显示项目，则必须在每次图像加载时重绘所有内容，而不仅仅是绘制那一张图像。

这是一个示例，我在其中绘制了 3 个对象:一个圆、一个图像和一个窗口。我会立即绘制它们，无论图像是否已加载，但一旦图像已加载，我会再次绘制所有，以确保图像正确地位于其他两个对象之间:

http://jsfiddle.net/U5bXf/32/

速记相关代码(以防 jsfiddle 宕机)是:

var img = new Image()
img.onload = function() {
  draw()
};
img.src = "http://placekitten.com/100/140";

draw();

function draw() {
// object one

// Now we'll draw the image in between, if its loaded
ctx.drawImage(img, 100, 30);

// object two
}

---

这行下面的代码是对评论的回应

您已经发布了代码，但您会注意到您在 onload 函数中唯一绘制的是图像。

onload 函数通常发生在其他绘制命令之后(除非页面已经加载，否则它可能是其中之一)。您需要将所有绘图代码移动到 onload 函数中，或者制作您自己的绘图函数来加载所有内容。例如:

<img id="black_checkers_piece" src="egsdk/BlackCheckersPiece.png" style="display: none;">
<canvas id="c1" style="border:1px solid #998800"></canvas>
<script type="text/javascript">
var canvasID = document.getElementById('c1');
var ctx = canvasID.getContext('2d');
var img = new Image();
img.src = document.getElementById('black_checkers_piece').src;
img.onload = function(){
  // assuming we want the image drawn before the line:
  ctx.drawImage(img, 10, 10, 32, 32);

  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.moveTo(0, 0);
  ctx.lineTo(50, 50);
  ctx.stroke();
}