技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > html/html5 > 正文

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

来源: 技术CTO 阅读:

我现在需要生成两幅由点形成的image,且均要在canvas里边画出来,想要达到的效果是两幅image可以分别处于两个图层上,想要显示哪个就显示哪个,现在最关键的就是Layers不知道怎么实现,我把相关的在canvas里边draw的部分代码:
 tiles = new L.TileLayer.Canvas();
        var imageUrl;
        var imageUrl1 = "@ViewBag.HostName/Home/BoundsImage?name=@ViewBag.Database";//stands for the first part of imageUrl

        tiles.drawTile = function (canvas, tile, zoom) {
            var context = canvas.getContext('2d');
            
            //paint tile

            var tileSize = this.options.tileSize;
            // start coordinates to tile pixels
            var start = tile.multiplyBy(tileSize);
            var end = [start.x + tileSize, start.y + tileSize];

            var ul = map.unproject(start);
            var lr = 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;

            var image = new Image();
            image.src = imageUrl;
            $(image).load(function () { context.drawImage(image, 0, 0); });
            }

L.TileLayer这个是你自己写的还是现成的库?
楼主,我也做地图开发。
但是,我是菜鸟。
能加我么?164855726秋秋
多加几个canvas即可
多个 canvas 可以重叠,分别用 style.display = 'none' 来隐藏,只留一个显示。

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

HTML5 canvas 是透明的。多个重叠的 canvas 可以同时显示,实现多层 layer。还可以控制涂色的透明度,产生半透明覆盖效果。我曾用这种方式制造出玻璃效果,看上去很美。

4楼主,如你所说,我试了下,两个canvas重叠后,怎么只能显示其中一个,我想小的canvas放在大的canvas的上面同时显示,不知道如何设置
Ant_cc:为了核实,又看了以前做的程序,没有问题,canvas 可以完全重叠,互不影响,画出的图形能同时显示。

canvas 重叠,最简单的办法是把 style.postion 设成 absolute。位置和大小也最好用 style 设置,不要用 canvas 本身的属性。

这是 canvas 基本特性,应该和浏览器无关,只要支持 html5 就应该支持。
引用 6 楼 jinghai1776 的回复:
Ant_cc:为了核实,又看了以前做的程序,没有问题,canvas 可以完全重叠,互不影响,画出的图形能同时显示。

canvas 重叠,最简单的办法是把 style.postion 设成 absolute。位置和大小也最好用 style 设置,不要用 canvas 本身的属性。

这是 canvas 基本特性,应该和浏览器无关,只要支持 html5 就应该支持。

谢谢,jinghai1776,我再试试
引用 6 楼 jinghai1776 的回复:
Ant_cc:为了核实,又看了以前做的程序,没有问题,canvas 可以完全重叠,互不影响,画出的图形能同时显示。

canvas 重叠,最简单的办法是把 style.postion 设成 absolute。位置和大小也最好用 style 设置,不要用 canvas 本身的属性。

这是 canvas 基本特性,应该和浏览器无关,只要支持 html5 就应该支持。

说的很好。。。。

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^