html5 - canvas元素 - 多个图层

时间:2010-06-09 18:17:46

标签: html5 canvas layer

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

因此,如果我在顶层执行clearRect,它将不会删除底层?

感谢。

7 个答案:

答案 0 :(得分:240)

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

答案 1 :(得分:30)

与此相关:

如果你的画布上有东西而你想在它后面画一些东西 - 你可以通过将context.globalCompositeOperation设置更改为'destination-over' - 然后将其返回'source-over'来实现。当你完成了。

var co = document.getElementById('cvs').getContext('2d');

// Draw a red square

co.fillStyle = 'red';
co.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 whats already on the canvas

co.globalCompositeOperation = 'destination-over';



// Draw a big yellow rectangle

co.fillStyle = 'yellow';
co.fillRect(0,0,600,250);


// Now return the globalCompositeOperation to source-over and draw a
// blue rectangle

co.globalCompositeOperation = 'source-over';

co.fillStyle = 'blue';
co.fillRect(75,75,100,100);

答案 2 :(得分:19)

您可以创建多个canvas元素,而无需将其附加到文档中。这些将是您的图层

然后随意使用它们,最后只需使用drawImage上的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

答案 3 :(得分:4)

我也有同样的问题,我有多个具有position:absolute的画布元素完成工作,如果你想将输出保存到图像中,那就不行了。

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

https://github.com/federicojacobi/layeredCanvas

我打算添加额外的功能,但现在它会这样做。

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

答案 4 :(得分:3)

你也可以签出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();

答案 5 :(得分:0)

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

在我们的案例中,我们使用分层透明的PNG&z-index作为&#34;产品制造商&#34;小部件。 Html2canvas工作得非常出色,无需推送图像,也无法使用复杂性,变通方法和无响应的#34帆布本身。我们无法用香草帆布+ JS顺利/理智地做到这一点。

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

答案 6 :(得分:0)

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