<!doctype html>

 <html>

  <head>

   <meta charset="utf-8">

   <link href="style.css" rel="stylesheet" type="text/css">

   <title></title>

  </head>

 <body>

<canvas id="canv"></canvas>

<script src="radar.js" type="text/javascript"></script>

 </body>

</html>

body {

 margin: 0;

 padding: 0;

 overflow:scroll;

 width: 100%;

 background: #FFF;

 font-size: 1.05em;

}

var c = document.getElementById('canv');

 var w = c.width = window.innerWidth*1.5;

 var h = c.height = window.innerHeight*1.5;

 var $ = c.getContext('2d');

 window.addEventListener('resize', function() {

    c.width = window.innerWidth;

    c.height = window.innerHeight;

 }, false);

 function drawOnePoint(xx,yy,r,text) {

     u=2;

     var col = 63;

     var x=w/2+xx*r*3;

     var y=h/2+yy*r*3;

        var g = $.createRadialGradient(x, y, 0, x, y, r);

        g.addColorStop(0, 'hsla(' + col * u + ',95%,70%,1)');

        g.addColorStop(0.5, 'hsla(' + col * u + ',95%,50%,.8)');

        g.addColorStop(1, 'hsla(' + col * u + ',95%,20%,1)');

        $.fillStyle = g;

        $.beginPath();

        $.arc(x, y, r, 0, Math.PI * 2);

        $.fill();

        $.fillText(text,x,y)

 }

 function go() {

    $.fillStyle = 'hsla(0,0%,5%,1)';

    $.fillRect(0, 0, w, h);

    var r=2;

    drawOnePoint(0,0,r,"ap1");

     drawOnePoint(0,1,r,"ap2");

      drawOnePoint(1,0,r,"ap3");

       drawOnePoint(0,-1,r,"ap4");

       drawOnePoint(-1,0,r,"ap5");

      drawOnePoint(0,2,r,"ap2");

      drawOnePoint(2,0,r,"ap3");

       drawOnePoint(0,-2,r,"ap4");

       drawOnePoint(-2,0,r,"ap5");

         drawOnePoint(0,3,r,"ap2");

      drawOnePoint(3,0,r,"ap3");

       drawOnePoint(0,-3,r,"ap4");

       drawOnePoint(-3,0,r,"ap5");

       drawOnePoint(-30,0,r,"ap-30");

       drawOnePoint(0,50,r,"ap-50");

       drawOnePoint(0,70,r,"ap-70");

       drawOnePoint(0,40,r,"ap-40");

       drawOnePoint(0,30,r,"ap-30");

    window.requestAnimationFrame(go);

 }

 go()

radar js的更多相关文章

  1. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...

  2. 时隔两个月再写的Echarts（Enterprise Charts，商业级数据图表）一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  3. Echars详解

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /1 ...

  4. v-charts简介

    一, v-charts简介 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2.0 和 echarts 封 ...

  5. 百度echart初用总结

    1.先下载echarts.js.我在百度下载的是 echarts-2.2.7 (from Baidu).压缩包里面的build->dist中的echarts.js或者echarts-all.js ...

  6. echarts实现自动轮播tooltip

    最近需要实现echarts图形中hover效果轮播(即tooltip在各个数据点上轮流显示)的功能,以下就是我学习的一个过程,只是提供思路,具体场景需要自己修改.(仅针对echarts 2.2.7及以 ...

  7. krpano之小地图

    效果: 点击地图按钮时,小地图移入,再次点击时移出. 地图上显示表示场景位置的坐标点,和可控制场景观看方向的雷达区. 插件: radar.js(plugins) radar.swf(plugins) ...

  8. CSDN开源夏令营 百度数据可视化实践 ECharts（8）

    (1)前言 首先谢谢林峰老师,继续接着第七篇提到的内容.CSS布局确实非常累,感觉不好看了就的调整,总的看起来的高大上嘛.好了废话不再多说.今天主要就先解说一个页面的内容,对于CSS布局后面讲会具体的 ...

  9. 图表制作工具之ECharts

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

随机推荐

  1. Hibernate 的dialect 大全

    RDBMS 方言 DB2 org.hibernate.dialect.DB2Dialect DB2 AS/400 org.hibernate.dialect.DB2400Dialect DB2 OS3 ...

  2. shell读取文件内容

           Shell脚本,执行解释速度快.代码简单易于理解.在shell代码编写过程中,经常会用到读取文件内容. 写法一: ------------------------------------ ...

  3. redis入门配置

    简介: Redis是Nosql中比较出名的,分布式数据库缓存,提升相应的速度,降低对数据库的访问! Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,(永久 ...

  4. rhel7修改网卡命名规则

    1步:当安装完红帽RHEL7系统安装完成,您的网卡命名是这样的. 第2步:请编辑网卡的配置文件 将”/etc/sysconfig/network-scripts/ifcfg-eno16777736“的 ...

  5. nginx location语法使用说明

    语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因 ...

  6. Ubuntu14.04安装MySql

    我们要确保Ubuntu14.04的服务器是可以上网的,这里我就不操作,这个比较简单.由于我的服务器是用Cobbler部署的,所以要更改源. # vi /etc/apt/source.list   我这 ...

  7. Android延时执行的几种方法

    开启新线程 new Thread(new Runnable(){ public void run(){ Thread.sleep(XXXX); handler.sendMessage(); //告诉主 ...

  8. 炮兵阵地 POJ 1185

    n*m P 和 M P可以放人 M不行 人不能相互打到 问最多可以放多少人 #include<stdio.h> #include<algorithm> #include< ...

  9. npm安装完bower，使用时提示bower不是内部或外部命令

    归根结底还是环境变量的问题,但是配了好几次没配成功,最后就直接把装好的node里面的复制到系统创建的环境变量目录下,问题解决! 问题描述:我们安装node.js,npm,通过npm安装bower一路正 ...

  10. PowerDesigner导出SQL时自动生成注释

    在powerBuilder中新建一个Physical Data Model,在其中新建一个用户表,信息如下图所示: 此时的SQL语句可从其中的Preview视图中得到,如下图所示: 这个时候生成的sq ...