与此相关的:

如果你在画布上有一些东西，你想在它的后面画一些东西，你可以通过改变上下文来做到这一点。globalCompositeOperation设置为'destination-over' -然后当你完成时返回它为'source-over'。

var context = document.getElementById('cvs').getContext('2d'); // Draw a red square context.fillStyle = 'red'; context.fillRect(50,50,100,100); // Change the globalCompositeOperation to destination-over so that anything // that is drawn on to the canvas from this point on is drawn at the back // of what's already on the canvas context.globalCompositeOperation = 'destination-over'; // Draw a big yellow rectangle context.fillStyle = 'yellow'; context.fillRect(0,0,600,250); // Now return the globalCompositeOperation to source-over and draw a // blue rectangle context.globalCompositeOperation = 'source-over'; // Draw a blue rectangle context.fillStyle = 'blue'; context.fillRect(75,75,100,100); <canvas id="cvs" />

不，但是，您可以将多个<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画布上绘制第二个图层。然后当你在顶部图层上清除矩形时，下部画布上的任何内容都会显示出来。

但是图层02，将覆盖图层01中的所有图纸。我用它在两个图层中显示绘图。在样式中使用(background-color: transparent;)

< span style=" font - family:宋体;"> <canvas id="lay01" width="500" height="500" style="位置:绝对;左:0;上图:0;z - index: 0;背景颜色:透明;" > > < /画布 <canvas id="lay02" width="500" height="500" style="位置:绝对;左:0;上图:0;z - index: 1;背景颜色:透明;" > > < /画布 < / div >

与此相关的:

如果你在画布上有一些东西，你想在它的后面画一些东西，你可以通过改变上下文来做到这一点。globalCompositeOperation设置为'destination-over' -然后当你完成时返回它为'source-over'。

var context = document.getElementById('cvs').getContext('2d'); // Draw a red square context.fillStyle = 'red'; context.fillRect(50,50,100,100); // Change the globalCompositeOperation to destination-over so that anything // that is drawn on to the canvas from this point on is drawn at the back // of what's already on the canvas context.globalCompositeOperation = 'destination-over'; // Draw a big yellow rectangle context.fillStyle = 'yellow'; context.fillRect(0,0,600,250); // Now return the globalCompositeOperation to source-over and draw a // blue rectangle context.globalCompositeOperation = 'source-over'; // Draw a blue rectangle context.fillStyle = 'blue'; context.fillRect(75,75,100,100); <canvas id="cvs" />

您可以创建多个画布元素，而无需将它们追加到文档中。这些是你的图层:

然后做任何你想做的事情，最后只是在目的地画布上使用drawImage on context以适当的顺序渲染它们的内容。

例子:

/* using canvas from DOM */
var domCanvas = document.getElementById('some-canvas');
var domContext = domCanvas.getContext('2d');
domContext.fillRect(50,50,150,50);

/* virtual canvase 1 - not appended to the DOM */
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50,50,150,150);

/* virtual canvase 2 - not appended to the DOM */    
var canvas2 = document.createElement('canvas')
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = 'yellow';
ctx2.fillRect(50,50,100,50)

/* render virtual canvases on DOM canvas */
domContext.drawImage(canvas, 0, 0, 200, 200);
domContext.drawImage(canvas2, 0, 0, 200, 200);

这里是一些代码依赖:https://codepen.io/anon/pen/mQWMMW

你也可以登录http://www.concretejs.com，这是一个现代的、轻量级的Html5画布框架，支持点击检测、分层和许多其他外围功能。你可以这样做:

var wrapper = new Concrete.Wrapper({
  width: 500,
  height: 300,
  container: el
});

var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();

wrapper.add(layer1).add(layer2);

// draw stuff
layer1.sceneCanvas.context.fillStyle = 'red';
layer1.sceneCanvas.context.fillRect(0, 0, 100, 100);

// reorder layers
layer1.moveUp();

// destroy a layer
layer1.destroy();