为了账号安全,请及时绑定邮箱和手机立即绑定

html5 - canvas元素 - 多个图层

/ 猿问

html5 - canvas元素 - 多个图层

慕姐4208626 2019-08-24 17:40:58

html5 - canvas元素 - 多个图层

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

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

谢谢。


查看完整描述

3 回答

?
ABOUTYOU

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


查看完整回答
反对 回复 2019-08-24
?
牛魔王的故事

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


然后随心所欲地做任何事情,最后只需使用drawImageon 在目标画布上以正确的顺序渲染其内容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


查看完整回答
反对 回复 2019-08-24
?
守着一只汪

与此相关:


如果你的画布上有东西,并且你想在它的背面画一些东西 - 你可以通过将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);


查看完整回答
反对 回复 2019-08-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信