HTML5 - 帆布元件 - 多层

Question

无任何扩展库，是有可能具有多个层以相同的画布元件？

所以，如果我做一个clearRect顶层上，也不会擦除该底部一个？

感谢。

Answer 1

没有，但是，可以在彼此的顶部层的多个<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顶层上，下画布上无论是会显示出来。

Answer 2

与此相关的：

如果你有你的画布上的东西，你想在它的背面画的东西 - 你可以通过改变context.globalCompositeOperation设置为“目的地在”做 - 然后返回到“源，在”当你完成。

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

Answer 3

可以而不附加他们入文档创建多个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);

，这里是一些codepen： https://codepen.io/anon/pen/mQWMMW

Answer 4

我有同样的问题也一样，我虽然多次画布元素与立场：绝对没有工作，如果你想保存输出到图像，这是行不通的。

所以我说干就干，做了一个简单的分层的“制度”的代码，好像每一层都有自己的代码，但是这一切都被渲染成相同的元素。

https://github.com/federicojacobi/layeredCanvas

我打算增加额外的功能，但现在它会做。

可以做多种功能和呼叫它们，以“假”的层。

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

Answer 6

据我所知，将q不希望使用一个库，但我会提供这种为他人从谷歌搜索来。 @EricRowell提到一个很好的插件，但是，也有另一种插件，您可以试试， html2canvas 。

在我们的例子中，我们使用分层透明PNG与z-index为“产品生成器”窗口小部件。 Html2canvas工作出色熬不推的图像，也没有使用复杂，变通的筹码减少，而“不响应”本身画布。我们无法与香草帆布+ JS做到这一点顺畅/理智。

绝对的div

首先使用z-index产生的相对定位的包装中的层状的内容。然后通过管html2canvas包装以获得呈现画布，你可能离开原样，或者输出为图像，使得客户机可以保存它。