如何控制画布对象的z-index？

Question

当我在画布中绘制一些对象时,有时候新对象会放在旧对象下面.例如,我将一些图像添加到画布然后绘制一条线.当我运行代码图像是最重要的.我在网上寻找解决方案.但没有直接的解决方案.:(在某些情况下,它已被视为一个错误!在探险家.我怎么能控制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();
}