html5-画布元素-多层

没有任何扩展库，同一个canvas元素中可以有多个图层吗？

因此，如果我在顶层上执行clearRect，它将不会擦除底层？

谢谢。

不，但是，您可以将多个<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。然后，当您clearRect在顶层时，下部画布上的所有内容都会显示出来。

与此相关：

如果您在画布上有东西，并且想在它的背面绘制东西，可以通过将context.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元素，而无需将其附加到文档中。这些将是您的图层：

然后对它们进行任何操作，最后使用drawImageon 在目标画布上按适当顺序呈现其内容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

我也遇到了同样的问题，当我将多个具有position：absolute的画布元素同时使用时，如果您要将输出保存到图像中，那将是行不通的。

因此，我继续进行了一个简单的分层“系统”来进行编码，就好像每个层都有自己的代码一样，但是所有这些都被渲染到同一元素中。

https://github.com/federicojacobi/layeredCanvas

我打算添加额外的功能，但现在可以了。

您可以执行多种功能并调用它们以“伪造”图层。

您可能还需要检出http://www.concretejs.com，这是一个现代的，轻量级的Html5 canvas框架，它可以进行点击检测，分层和许多其他外围功能。您可以执行以下操作：

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

我知道Q不想使用库，但我会为其他来自Google搜索的人提供此库。@EricRowell提到了一个不错的插件，但是，您也可以尝试使用另一个插件html2canvas。

在我们的案例中，我们将分层透明PNG z-index用作“产品构建器”小部件。Html2canvas出色地工作，可以在不压入图像的情况下使堆栈沸腾，也无需使用复杂性，变通办法和“无响应”画布本身。我们无法使用香草canvas + JS顺利/理智地执行此操作。

首先z-index在绝对div上使用，以在相对定位的包装器内生成分层内容。然后通过html2canvas通过管道传递包装器，以获取渲染的画布，您可以原样保留该画布，或将其输出为图像，以便客户端可以保存它。

但第02层将覆盖第01层中的所有图形。我用它来显示两层中的图形。在样式中使用（background-color：transparent;）。

    <div style="position: relative;"> 
      <canvas id="lay01" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 0; background-color: transparent;">
      </canvas> 
      <canvas id="lay02" width="500" height="500" style="position: absolute; left: 0; top: 0; z-index: 1; background-color: transparent;">
      </canvas>
</div>