html5 javascript实现canvas里边多图层显示怎么弄

html5中的canvas本身的API是不存在图层概念的。要想实现实现多图层功能，必须要使用多个canvas对象，不过这些canvas对象，是在内存中的，而不是在html的元素树中。每个canvas维持一个图层就可以，然后主canvas是负责显示最后的合成的效果。

js动态创建canvas对象如下：

var layer1=document.createElement('canvas')

layer1.width=800

layer1.height=600

var layer1_canvas=layer1.getContext('2d')

var layer2=document.createElement('canvas')

layer2.width=800

layer2.height=600

var layer2_canvas=layer1.getContext('2d')

layer1_canvas.drawSomething()

layer2_canvas.drawSomething()

canvas.save()//用来显示的canvas

canvas.globalCompositeOperation="destination-over"//设置多个图层如何混合，这个可以百度canvas混合模式，这个和PS是相近的

canvas.drawImage(layer1,0,0,800,600,0,0,800,600)

canvas.drawImage(layer2,0,0,800,600,0,0,800,600)

canvas.restore()

这样就把两个图层绘制在一个图层中，单独改变任一个图层都不会改变其他图层。不明白可追问。

html5实现canvas多图层举例如下：

<div style="position: relative">

<canvas id="layer1" width="100" height="100"

style="position: absoluteleft: 0top: 0z-index: 0"></canvas>

<canvas id="layer2" width="100" height="100"

style="position: absoluteleft: 0top: 0z-index: 1"></canvas>

</div>

上面两个层layer1和layer2就是两个层，里面可以嵌套图片

---