如果没有任何扩展库,在同一个canvas元素中有多个层是可能的吗?
所以如果我在顶层做一个clearRect,它不会擦除底层?
谢谢。
发布于 2010-06-10 02:48:18
但是,您可以将多个<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
时,下面画布上的任何东西都会显示出来。
发布于 2013-05-06 03:48:56
与此相关:
如果你的画布上有一些东西,你想在后面画一些东西--你可以通过将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" />
发布于 2015-12-22 10:08:30
我也遇到了同样的问题,虽然多个画布元素的position:absolute可以完成这项工作,但如果你想将输出保存到图像中,那是行不通的。
所以我继续做了一个简单的分层“系统”来编写代码,就好像每一层都有自己的代码一样,但它们都被渲染到相同的元素中。
https://github.com/federicojacobi/layeredCanvas
我打算添加额外的功能,但现在就可以了。
你可以做多个函数并调用它们来“伪造”层。
https://stackoverflow.com/questions/3008635
复制相似问题