<!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. mysql 安装失败解决方法

    在安装mysql的过程中,出现的最麻烦的问题和解决方法 安装后,启动不成功,就卡了,程序就没有响应. 如何解决: 找到mysql安装目录下的 #Path to the database root da ...

  2. Oracle 死锁的检测查询及处理

    来源于: http://www.cnblogs.com/hoojo/archive/2012/08/31/2665583.html -- 死锁查询语句 SELECT bs.username " ...

  3. HTML5基础知识（1）--上标和下标文本

    1.上标文本标签:<sup>/<sup> 2.下标文本标签:<sub></sub> 3.案例代码 <!doctype html> <h ...

  4. 通过HttpUrlConnection下载文件并显示进度条

    实现效果: 核心下载块: int count = 0; URL url = new URL("http://hezuo.downxunlei.com/xunlei_hezuo/thunder ...

  5. 【线性规划与网络流 24题】已完成(3道题因为某些奇怪的原因被抛弃了QAQ)

    写在前面:SDOI2016 Round1滚粗后蒟蒻开始做网络流来自我拯救(2016-04-11再过几天就要考先修课,现在做网络流24题貌似没什么用←退役节奏) 做的题目将附上日期,见证我龟速刷题. 1 ...

  6. hdu3437 划分树 区间内小于第K大的值得和

    Minimum Sum Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  7. C#-WinForm-打开其他窗体的三种方式-Show()、设置Owner()、ShowDialog()

    打开其他窗体的三种方式 Show - 例如登入界面进入主页面,直接将主页面展示出来,两个窗体互不影响 public partial class Form1 : Form { public Form1( ...

  8. MySQL 1045登录失败

    当你登录MySQL数据库出现:Error 1045错误时(如下图),就表明你输入的用户名或密码错误被拒绝访问了,最简单的解决方法就是将MySQL数据库卸载然后重装,但这样的缺点就是就以前的数据库中的信 ...

  9. mybatis实战教程(mybatis in action),mybatis入门到精通

    转自:http://www.yihaomen.com/article/java/302.htm (读者注:其实这个应该叫做很基础的入门一下下,如果你看过hibernate了那这个就非常的简单) (再加 ...

  10. UML类图中的六种关系及实例

    前言: 设计模式是一种对于面向对象语言(C#,C++,Java)的高级应用.其思维体现出的是真正的代码设计.每一种模式都堪称巧妙!但基于各种设计模式,这里少不了基本的类图设计,本文简要列出6种关系,及 ...