html5 javascript实现canvas里边多图层显示怎么弄

 我来答
ly10604828
2017-02-19 · TA获得超过1465个赞
知道小有建树答主
回答量:341
采纳率:100%
帮助的人:351万
展开全部
html5中的canvas本身的API是不存在图层概念的。要想实现实现多图层功能,必须要使用多个canvas对象,不过这些canvas对象,是在内存中的,而不是在html的元素树中。每个canvas维持一个图层就可以,然后主canvas是负责显示最后的合成的效果。
js动态创建canvas对象如下:
var layer1=document.createElement('canvas');
layer1.width=800;
layer1.height=600;
var layer1_canvas=layer1.getContext('2d');
var layer2=document.createElement('canvas');
layer2.width=800;
layer2.height=600;
var layer2_canvas=layer1.getContext('2d');
layer1_canvas.drawSomething();
layer2_canvas.drawSomething();
canvas.save()//用来显示的canvas
canvas.globalCompositeOperation="destination-over";//设置多个图层如何混合,这个可以百度canvas混合模式,这个和PS是相近的

canvas.drawImage(layer1,0,0,800,600,0,0,800,600)
canvas.drawImage(layer2,0,0,800,600,0,0,800,600)
canvas.restore();
这样就把两个图层绘制在一个图层中,单独改变任一个图层都不会改变其他图层。不明白可追问。
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式