此行下方的代码是对注释

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

Answer 2

Canvas没有'z-index'的概念。画布中没有对象 - 画布只是位图，只是像素。

您确定要在画布上绘制线条和图像，而不仅仅是创建新元素（如img元素吗？）。

如果是，请检查您调用绘图方法的顺序，如fill（）和stroke（）。在您执行此操作之前，实际上不会绘制形状（无论您在哪里进行moveTo和lineTo调用）。

Answer 3

我一直在使用fabric.js，它有一些你可能会觉得有用的功能。虽然不是z-index本身，但它可以设置背景或叠加 - 下面是http://fabricjs.com/customization/上的示例

var canvas = new fabric.Canvas（'c13'）; canvas.add（new fabric.Circle（{radius：30，fill：'＃f55'，top：100，left：100}））; canvas.setOverlayImage（'../ assets / jail_cell_bars.png'，canvas.renderAll.bind（canvas））; 此.__ canvases.push（画布）;

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

3 个答案:

此行下方的代码是对注释