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

显示全部楼层 · 2021-1-27 06:20:34

我现在需要生成两幅由点形成的image，且均要在canvas里边画出来，想要达到的效果是两幅image可以分别处于两个图层上，想要显示哪个就显示哪个，现在最关键的就是Layers不知道怎么实现，我把相关的在canvas里边draw的部分代码：
tiles=newL.TileLayer.Canvas();
varimageUrl;
varimageUrl1="@ViewBag.HostName/Home/[email protected]";//standsforthefirstpartofimageUrl
tiles.drawTile=function(canvas,tile,zoom){
varcontext=canvas.getContext('2d');
//painttile
vartileSize=this.options.tileSize;
//startcoordinatestotilepixels
varstart=tile.multiplyBy(tileSize);
varend=[start.x+tileSize,start.y+tileSize];
varul=map.unproject(start);
varlr=map.unproject(end);
imageUrl=imageUrl1;
imageUrl+="&element=";
imageUrl+="@ViewBag.VizElement";
imageUrl+="&bound="+ul.lat+'_'+ul.lng+'_'+lr.lat+'_'+lr.lng+"&width="+tileSize+"&height="+tileSize+"&color_min="+slider_minValue+"&color_max="+slider_maxValue+"&color_scale="+color_scale+"&point_size="+point_size+"&filterMinCoh="+filter_min_coh;
varimage=newImage();
image.src=imageUrl;
$(image).load(function(){context.drawImage(image,0,0);});
}
分 -->

千问 · 2021-1-27 06:20:34

L.TileLayer这个是你自己写的还是现成的库？

千问 · 2021-1-27 06:20:34

楼主，我也做地图开发。
但是，我是菜鸟。
能加我么？164855726秋秋

千问 · 2021-1-27 06:20:34

多加几个canvas即可

千问 · 2021-1-27 06:20:34

多个canvas可以重叠，分别用style.display='none'来隐藏，只留一个显示。
HTML5canvas是透明的。多个重叠的canvas可以同时显示，实现多层layer。还可以控制涂色的透明度，产生半透明覆盖效果。我曾用这种方式制造出玻璃效果，看上去很美。

千问 · 2021-1-27 06:20:34

引用4楼jinghai1776的回复:多个canvas可以重叠，分别用style.display='none'来隐藏，只留一个显示。
HTML5canvas是透明的。多个重叠的canvas可以同时显示，实现多层layer。还可以控制涂色的透明度，产生半透明覆盖效果。我曾用这种方式制造出玻璃效果，看上去很美。
４楼主，如你所说,我试了下，两个canvas重叠后，怎么只能显示其中一个，我想小的canvas放在大的canvas的上面同时显示，不知道如何设置

千问 · 2021-1-27 06:20:34

Ant_cc：为了核实，又看了以前做的程序，没有问题，canvas可以完全重叠，互不影响，画出的图形能同时显示。
canvas重叠，最简单的办法是把style.postion设成absolute。位置和大小也最好用style设置，不要用canvas本身的属性。
这是canvas基本特性，应该和浏览器无关，只要支持html5就应该支持。

千问 · 2021-1-27 06:20:34

引用6楼jinghai1776的回复:Ant_cc：为了核实，又看了以前做的程序，没有问题，canvas可以完全重叠，互不影响，画出的图形能同时显示。
canvas重叠，最简单的办法是把style.postion设成absolute。位置和大小也最好用style设置，不要用canvas本身的属性。
这是canvas基本特性，应该和浏览器无关，只要支持html5就应该支持。
谢谢，jinghai1776，我再试试

千问 · 2021-1-27 06:20:34

引用6楼jinghai1776的回复:Ant_cc：为了核实，又看了以前做的程序，没有问题，canvas可以完全重叠，互不影响，画出的图形能同时显示。
canvas重叠，最简单的办法是把style.postion设成absolute。位置和大小也最好用style设置，不要用canvas本身的属性。
这是canvas基本特性，应该和浏览器无关，只要支持html5就应该支持。
说的很好。。。。