<!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. hiho一下 第六十六周

    题目链接:这是一道水爆了的广搜题 #include<iostream> #include<stdio.h> #include<algorithm> #include ...

  2. webpack进阶之插件篇

    一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...

  3. 使用delegate实现简单的查询功能

    protected void imgbtnSearch_Click(object sender, System.Web.UI.ImageClickEventArgs e) { string keyWo ...

  4. oracle游标调试结果显示位置

    在SQL窗口输入内容,按F8后,可以在下图看到

  5. Ubuntu14.04下MySQL的安装

    1.输入 sudo apt-get install mysql-server 2.继续执行后,需要设定MySQL密码. 3.再次输入密码. 4.之后就安装成功了,输入mysql -u root -p进 ...

  6. HttpServletRequest 转换成MultipartHttpServletRequest

    //转换 HttpServletRequestMultipartHttpServletRequest mulReq=(MultipartHttpServletRequest)request;//获取上 ...

  7. 【UOJ #150】【NOIP 2015】运输计划

    http://uoj.ac/problem/150 用树链剖分求lca,二分答案树上差分判断. 时间复杂度$O(nlogn)$,n,m同阶. #include<cstdio> #inclu ...

  8. nginx实战2---浏览器设置缓存

    对常见格式的图片文件等在浏览器本地缓存,对于css,js等文件在浏览器本地缓存. 语法:expires [time|epoch|max|off 默认值:off expires指令控制HTTP应答中的& ...

  9. 平行四边形面积 light 1305

    double 不一定是与x y轴平平行 所以要正弦定理和余弦定理 似乎一定要printf输出 错了好几次 #include<iostream> #include<math.h> ...

  10. Vim快捷键操作命令

    Vim是一个超牛的编辑器,命令功能十分强大 .而且这些命令大都可以进行组合 ,比如,9yy命令表示复制9行内容,9表示要复制的行数,同样100dd表示删除100行,当数字和命令合作的时候,就比单纯的命 ...