javascript图层,css图层

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

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();

这样就把两个图层绘制在一个图层中，单独改变任一个图层都不会改变其他图层。不明白可追问。

相关问答

Q1: (急)javascript 实现图层的概念

给你写个具备扩展性的

script

function showMe(which)

{

for (var i=0;idocument.getElementById("total").children.length;i++)

document.getElementById("total").children(i).style.zIndex=i;

which.style.zIndex=i+1;

}

/script

body

div id="total"

div style="position:absolute;left:30;top:50;z-index:0" onclick="showMe(this)"

img src=1.jpg

/div

div style="position:absolute;left:50;top:70;z-index:0" onclick="showMe(this)"

img src=2.jpg

/div

div style="position:absolute;left:70;top:90;z-index:0" onclick="showMe(this)"

img src=3.jpg

/div

/div

/body

Q2: AGS JS开发-动态图层全面解析一

动态图层是地图服务中包含的一项功能，允许通过客户端API动态的更改地图服务中的图层外观和行为。具体来说，通过动态图层可以实现：

拿WebGIS系统开发来说，如果想更改地图服务中某个图层的渲染方式，通常的做法是先将数据取到客户端，然后在客户端更改渲染方法。对于小数据量，这种客户端渲染的方式没有问题，但数据量大之后客户端无法承载。

个人认为，在以下业务需求下，可尝试使用动态图层来解决：

需要注意的是，动态图层支持的数据量也不是无限的，动态图层的出图效果与发布的动态地图服务效果一样。换句话说，如果动态地图服务中数据量上百万后，在客户端加载时会明显看到数据加载效果，而且加载会较慢，同样换成动态图层也会出现同样的效果。

动态图层支持的数据源包括：

在客户端API中使用动态图层功能时，可以结合rest服务地址来测试传递的参数是否合法，以及检验输出结果。rest地址中传递的参数内容可根据REST API帮助说明输入。

在JS API中与动态图层相关的数据源有两类：图层源和数据源。图层源指的是可以加载到地图中的Layer，数据源则是图层源Layer实际关联的原始数据。图层源与数据源的关系如下：

图层源分为两种：Map Layer和Data Layer，如果是原地图服务中的图层，则图层源类型是Map Layer；如果是从动态工作空间加载的图层，则是Data Layer类型。Data Layer根据原始数据的来源（即数据源），包含有：table、raster、query、join。table数据源指的是表和图层数据、raster指的是栅格数据、query指的是查询图层、join用于建关联关系。