在地图上使用canvas绘制面板

客官°小女子只卖身不卖艺 2022-05-16 02:18 333阅读 0赞

![70][]

html页面中引入：

<div id="result">
    	<canvas id="canvas" width="300" height="150"></canvas>
    </div>

css样式：

#canvas {
        filter:alpha(opacity=60);/*IE*/
        opacity:0.6;/*Mozilla*/
        /*background: #fff;*/
        padding: 7px;
        position: absolute;
        z-index: 100;
        bottom: 5px;
        right: auto;
        top: auto;
        left: 5px;/*old:225*/
    }

js方法：

function showOriginPanel(splitList){
        var canvas = document.getElementById('canvas');
        if(1 == splitList.length && splitList[0].color == "#d9d9d9" ){
            canvas.style.display = 'none';
        }
        if(5<splitList.length){
            canvas.width = 300;//130
            canvas.height = 35;//130+(splitList.length-5)*26
            canvas.style.width = '300px';//130px
            canvas.style.height = '35px';//'130px'+(splitList.length-5)*26
        }else{
            canvas.width = splitList.length * 100;
            canvas.height = 35;
            canvas.style.width = (splitList.length * 100) + 'px';
            canvas.style.height = '35px';
        }
    
        canvas.style.display = 'block';
        canvas.style.background = '#115FB1';//#fff
        canvas.style.boxShadow = 'rgba(0,0,0,0.2) 0 0 4px 2px';
        canvas.style.border = '1px solid #0C345C';
        canvas.style.borderRadius = '4px';
        // 添加DOM元素到地图中
        //map.getContainer().appendChild(canvas);
    
        var ctx=canvas.getContext("2d");
        ctx.fillStyle="#0000ff";
        //ctx.globalAlpha = 0.8;
        //ctx.fillRect(20,20,80,20);
        for (var i = 0; i < splitList.length; i++) {
            ctx.beginPath();
            //ctx.arc(15, i * 25 + 15, 5, 0, Math.PI * 2, false);
            ctx.arc(15 + i * 100, 15, 5, 0, Math.PI * 2, false);
            var text = '';
            text = splitList[i].alarmName;
            ctx.closePath();
            ctx.fillStyle = splitList[i].color;
            ctx.fill();
            ctx.font='12px 微软雅黑';
            ctx.fillStyle = '#fff';//#d2691e
            //ctx.fillText(text, 25, i * 25 + 20);
            ctx.fillText(text, 25 + i*100, 20);
        };
    
    }

调用：

var panelColorList = new Array();
    panelColorList.push({color: "#700000", alarmName: "小偷"});
    panelColorList.push({color: "#F0F8FF", alarmName: "强盗"});
    showOriginPanel(panelColorList);

[70]: /images/20220516/120fba4664f342cea688605073cefdce.png

发表评论取消回复

表情：

评论列表（有 0 条评论，333人围观）

还没有评论，来说两句吧...

相关阅读

相关 matlab如何在地图上绘制圆圈

要在 Matlab 中在地图上绘制圆圈，可以使用 `geopoint` 函数创建圆圈的圆心位置，然后使用 `geobubble` 函数绘制圆圈。示例代码如下： l

朱雀/ 2024年03月25日 14:37/ 0 赞/ 99 阅读

相关在 Python 中使用 Pygal 绘制世界地图

在 Python 的 Pygal 库的帮助下，我们可以在 Python 中创建令人惊叹的世界地图，因为它提供了不同的功能来创建和自定义图形。本文探讨了绘制世界地图、自定义地图样

野性酷女/ 2024年03月22日 21:52/ 0 赞/ 111 阅读

相关 Vue+Openlayers实现地图上绘制线

场景 Vue+Openlayers实现显示图片并分优先级多图层加载： [Vue+Openlayers实现显示图片并分优先级多图层加载\_BADAO\_LIUMANG\_

缺乏、安全感/ 2023年10月02日 14:39/ 0 赞/ 6 阅读

相关 Fabricjs在Canvas上使用路径Path绘制不规则图形

场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性： [Fabricjs在Canvas上插入照片并设置缩小和翻转属性\_BADAO\_LIUMANG\_

迈不过友情╰/ 2023年10月01日 17:53/ 0 赞/ 13 阅读

相关使用 plotly 绘制 Choropleth 地图

本文将通过绘制中国省级 Choropleth 地图来解释如何使用 plotly 绘制 Choropleth 地图，主要有两种方法：底层 API `plotly.graph_ob

矫情吗；*/ 2023年07月09日 04:23/ 0 赞/ 20 阅读

相关使用canvas绘制笑脸

笑脸示例代码： <template> <div class="div"> <canvas id="tutorial3" width="15

╰半夏微凉°/ 2022年12月13日 14:27/ 0 赞/ 134 阅读

相关使用canvas绘制一个三角形

绘制一个三角形的例子： <template> <div class> <canvas id="tutorial2" width="15

￡神魔★判官ぃ/ 2022年12月13日 14:26/ 0 赞/ 209 阅读

相关 html canvas 绘制倒影,canvas

JavaScript let t = 0; const colors = \["\161616", "\cf894c", "\c74962"\]; const canva

系统管理员/ 2022年10月10日 06:24/ 0 赞/ 277 阅读

相关根据经纬度坐标值在百度地图上绘制轨迹

因为项目需要做物体轨迹检测，所以要把物体移动的轨迹在百度地图上进行绘制和显示，于是就在网上找到了这个方法，现在做个记录方便以后查阅： 1、html 部分设置存放地图的容器和设

本是古典何须时尚/ 2022年06月04日 09:58/ 0 赞/ 729 阅读

相关在地图上使用canvas绘制面板

![70][] html页面中引入： <div id="result"> <canvas id="canvas" width="300" height="

客官°小女子只卖身不卖艺/ 2022年05月16日 02:18/ 0 赞/ 334 阅读