Question

h5 的canvas标签，画出的图形怎么设置他的层级关系。像css的z-index这样设置层级

Answer 1

层级关系的布局有两种解决方法：

1.是使用标签的自然顺序和嵌套顺序来形成合理的布局。

2.而第一种方法却不是万能的，有时候我们需要将原本位于下层的元素移到另一个元素上方，那可以使用z-index；z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：Z-index 仅能在定位元素上奏效（position属性值设置除默认值static以外的元素，包括relative，absolute，fixed样式）

如何使用Z-index呢？

首先使用z-index需要先加上position:absolute/relative定位。

其次你要知道z-index 是要考虑父级的，如果子级z-index为0，那么父级就是200000也不会覆盖住子级。

最后在标准浏览器中，对父级的要求不是特别高，同级的对应上z-index可以了。但要注意的是父级里放一个子级那么父级是无法放在子级之上的，需要放在同一级别中才可以（经过测试的），如果想要父级覆盖子级，那么父级不需要设置z-index，只要孩子设置就z-index就可以了。

Answer 2

层级关系的布局有两种解决方法：

一种方法是使用标签的自然顺序和嵌套顺序来形成合理的布局。

而第一种方法却不是万能的，有时候我们需要将原本位于下层的元素移到另一个元素上方，那可以使用z-index；

而你说的不好用，则是zindex没有生效，没生效就是没有定义position属性，如果不想让元素的位置有所变化，就给赋予z-index属性的元素加上相对定位的position:relative;

追问

我说的是canvas里边，画出来的图形。不是div。比如：canvas画出来的一个圆。他没有z-index这个属性呀

Answer 3

//按自己想要的叠加的次序，依次嵌套，最下面的图片先画
img.src = "图片路径";
img.onload = function(){
pen.drawImage(img0,0,0);
//其次在上一个函数内部画中间的图片
img1.src = "图片路径";
img1.onload = function(){
pen.drawImage(img1,100,0);
//最后在上一个函数内部画最上面的图片
img2.src = "图片路径";
img2.onload = function(){
pen.drawImage(img2,200,0);
}
}
}
这样就按照我们想要的顺序画出来了