如何在html5中的canvas下实现ps中的叠加效果？

Question

如何在html5中的canvas下实现ps中的叠加效果

Answer 1

指定两个canvas的postion:absolution,然后设置者两个canvas的left与top属性，需要注意的是建议把小的canvas放到上面，方法是设置两个canvas的z-index为不同的值，值大的在上面。
绘图的过程可以参考一下代码：
var mycanvas=document.getElementByIdx_x_x_x("mycanvas");
var context = mycanvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){

// draw cropped image
var sourceX = 350;
var sourceY = 50;
var sourceWidth = 350;
var sourceHeight = 350;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = mycanvas.width / 2 - destWidth / 2;
var destY = mycanvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

Answer 2

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();
这样就把两个图层绘制在一个图层中，单独改变任一个图层都不会改变其他图层。不明白可追问。

Answer 3

html5实现canvas多图层举例如下：
<div style="position: relative;">
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
上面两个层layer1和layer2就是两个层，里面可以嵌套图片