html5 - canvas元素 - 多层 [英] html5 - canvas element - Multiple layers

问题描述

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

因此，如果我在顶层做clearRect，

解决方案

，您可以将多个< canvas> 元素层叠在一起，并完成类似的操作。

 < div style =position：relative;> 
< canvas id =layer1width =100height =100
 style =position：absolute; left：0; top：0; z-index：0;> < / canvas> 
< canvas id =layer2width =100height =100
 style =position：absolute; left：0; top：0; z-index：1;> < / canvas> 
< / div> 
  

在 layer1 画布上绘制第一层，以及 layer2 画布上的第二层。然后，当你 clearRect 在顶层，任何在底部画布上将显示。

Without any extension library, is it possible to have multiple layers in the same canvas element?

So if I do a clearRect on the top layer, it will not erase the bottom one?

Thanks.

解决方案

No, however, you could layer multiple <canvas> elements on top of each other and accomplish something similar.

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

Draw your first layer on the layer1 canvas, and the second layer on the layer2 canvas. Then when you clearRect on the top layer, whatever's on the lower canvas will show through.

这篇关于html5 - canvas元素 - 多层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！