<!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. 腾讯云CentOS 安装MediaWiki

    参考 : https://www.digitalocean.com/community/tutorials/how-to-install-mediawiki-on-centos-7 //安装好很多次终 ...

  2. 思维导图分享以及MindManager使用说明

    来源于: http://www.cnblogs.com/muhongxing/archive/2009/12/22/1628782.html http://www.cnblogs.com/muhong ...

  3. (Extjs)对于GridPanel的各种操作

    刚才做了个有点特殊的需求,在某窗口关闭时,要把Gridpanel中的选择行清空,因为如果不清空,直接双击,就不能即时更新出来我想要的内容. 答案是:Grid.getSelectionModel().c ...

  4. Java文件拷贝

    package com.lxm.demos; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io. ...

  5. 【BZOJ 1875】【SDOI 2009】HH去散步

    水啊水,最后ans别忘了%哦! #include<cstdio> #include<cstring> #include<algorithm> using names ...

  6. 一、项目基础架构（附GitHub地址）——以ABP为基础架构的一个中等规模的OA开发日志

    前言: 最近园子里ABP炒的火热.看了几篇对于ABP的介绍后,深感其设计精巧,实现优雅.个人感觉,ABP或ABP衍生品的架构设计,未来会成为中型Net项目的首选架构模式.如果您还不了解ABP是什么,有 ...

  7. Mysql-ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'

    方法一:1.关闭mysql   # service mysqld stop2.屏蔽权限   # mysqld_safe --skip-grant-table   屏幕出现: Starting demo ...

  8. python 冒泡排序

    冒泡排序: 相邻的两个数字先进行比较,也就是li[0]和li[1]进行比较,如果不是大于的关系,就继续依次进行li[1]和li[2]比较,进行交换然后每一次扫描得到的新列表如下: li = [11,2 ...

  9. WebClient 使用

    --post  请求 public static string PostMsg(Guid orgid, int page, int rows)        {            System.N ...

  10. MWeb

    专业的 Markdown 写作支持 极简 UI.Dark Mode.漂亮的 Markdown 语法高亮.列表缩进优化,提供 5 种主题选择. 除了支持基本的 Markdown 语法外,还支持大量 Ma ...