首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >html5 -画布元素-多层

html5 -画布元素-多层
EN

Stack Overflow用户
提问于 2010-06-10 02:17:46
回答 6查看 220.1K关注 0票数 197

如果没有任何扩展库,在同一个canvas元素中有多个层是可能的吗?

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

谢谢。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 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时,下面画布上的任何东西都会显示出来。

票数 289
EN

Stack Overflow用户

发布于 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" />

票数 54
EN

Stack Overflow用户

发布于 2015-12-22 10:08:30

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

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

https://github.com/federicojacobi/layeredCanvas

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

你可以做多个函数并调用它们来“伪造”层。

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3008635

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档