201

没有任何扩展库,是否可以在同一个画布元素中有多个图层?

所以如果我在顶层做一个 clearRect ,它不会擦除底层的吗?

谢谢。

4

7 回答 7

292

不,但是,您可以将多个<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在顶层时,下层画布上的任何东西都会显示出来。

于 2010-06-09T18:48:17.540 回答
58

与此相关:

如果你的画布上有一些东西,并且你想在它的背面画一些东西——你可以通过将 context.globalCompositeOperation 设置更改为“destination-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" />

于 2013-05-05T19:48:55.990 回答
41

您可以创建多个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

于 2015-03-01T23:03:56.483 回答
11

我也遇到了同样的问题,虽然多个带有 position:absolute 的画布元素可以完成这项工作,但如果你想将输出保存到图像中,那是行不通的。

所以我继续做了一个简单的分层“系统”来编码,好像每一层都有自己的代码,但它们都被渲染到同一个元素中。

https://github.com/federicojacobi/layeredCanvas

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

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

于 2015-12-22T02:08:30.207 回答
5

您还可以查看 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();
于 2016-04-01T22:52:14.810 回答
2

但是图层 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>

于 2019-12-29T20:02:44.217 回答
0

我知道 Q 不想使用库,但我会为来自谷歌搜索的其他人提供这个。@EricRowell 提到了一个很好的插件,但是,您还可以尝试另一个插件html2canvas

在我们的例子中,我们使用分层透明 PNGz-index作为“产品构建器”小部件。Html2canvas 在不推送图像、不使用复杂性、变通方法和“无响应”画布本身的情况下出色地简化了堆栈。使用香草画布+JS,我们无法顺利/理智地做到这一点。

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

于 2016-06-20T20:52:26.293 回答