1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         html, body {
  8.             margin: 0;
  9.             padding: 0;
  10.             border: none;
  11.             width: 100%;
  12.             height: 100%;
  13.         }
  14.     </style>
  15.     <script type="text/javascript">
  16.         onload = function () {
  17.             demoCanvas.height = document.body.clientHeight - paramsPanel.clientHeight;
  18.             demoCanvas.width = document.body.clientWidth;
  19.         }
  20.  
  21.     </script>
  22. </head>
  23. <body>
  24.     <div id="paramsPanel">
  25.         <label for="radius">radius</label><input id="radius" type="range" value="5" max="111" min="1" />
  26.         <label for="density">density</label><input id="density" type="range" value="5" max="111" min="1" />
  27.         <label for="areaRange">areaRange</label><input id="areaRange" type="range" value="32" max="111" min="1" />
  28.     </div>
  29.     <canvas id="demoCanvas"></canvas>
  30.     <script type="text/javascript">
  31.         onkeydown = function (e) {
  32.             switch (e.keyCode) {
  33.                 case 49:
  34.                     radius.focus();
  35.                     break;
  36.                 case 50:
  37.                     density.focus();
  38.                     break;
  39.                 case 51:
  40.                     areaRange.focus();
  41.                     break;
  42.             }
  43.         };
  44.         function dropDots() {
  45.             var ctx = demoCanvas.getContext("2d");
  46.             var ps = [];
  47.             function drop(e) {
  48.                 ctx.beginPath();
  49.                 ctx.arc(e.x, e.y, .5, 0, Math.PI * 2);
  50.                 ps.push([e.x, e.y]);
  51.                 ctx.fillStyle = "#000";
  52.                 ctx.fill();
  53.             }
  54.             demoCanvas.onmousedown = function (e) {
  55.                 demoCanvas.getContext("2d").clearRect(0, 0, 12344, 12344);
  56.                 ps = [];
  57.                 drop(e);
  58.                 addEventListener("mousemove", drop);
  59.             };
  60.             onmouseup = onblur = function () {
  61.                 if (!ps.length) {
  62.                     return;
  63.                 }
  64.                 removeEventListener("mousemove", drop);
  65.                 var radius = parseFloat(document.getElementById("radius").value);
  66.                 var density = parseInt(document.getElementById("density").value);
  67.                 var areaRange = parseInt(document.getElementById("areaRange").value);
  68.                 var areas = getAreas(ps, radius, density, areaRange);
  69.                 for (var i = 0; i < areas.length; i++) {
  70.                     var e = areas[i][0][0];
  71.                     ctx.beginPath();
  72.                     ctx.arc(e[0], e[1], areaRange / 2, 0, Math.PI * 2);
  73.                     ctx.strokeStyle = "#00a";
  74.                     ctx.stroke();
  75.                     ctx.closePath();
  76.                 }
  77.             }
  78.         }
  79.         dropDots();
  80.         function getAreas(ps, radius, density, areaRange) {
  81.             var vps = [];//所有符合条件的点与附近点集，格式为[point,[points]]
  82.             for (var i = 0; i < ps.length; i++) {
  83.                 var nps = [];//遍历附近的点，找出附近点的点集
  84.                 for (var j = 0; j < ps.length; j++) {//
  85.                     if (i === j) {
  86.                         continue;
  87.                     }
  88.                     if (xy2(ps[i], ps[j]) > radius) {
  89.                         continue;
  90.                     }
  91.                     nps.push(ps[j]);
  92.                 }
  93.                 if (nps.length > density) {//检查附近的点的密度
  94.                     vps.push([ps[i], nps]);
  95.                 }
  96.             }
  97.             var idxs = [];
  98.             for (var i = 0; i < vps.length; i++) {//生成所有符合条件的点集的坐标集
  99.                 idxs.push(i);
  100.             }
  101.             vps.sort(function (np0, np1) {//附近点集
  102.                 return np1[1].length - np0[1].length;
  103.             });
  104.             var areas = [];//返回值
  105.             while (idxs.length) {
  106.                 var nps0 = vps[idxs[0]];
  107.                 var g = [nps0];
  108.                 var new_idxs = [];//不符合条件点集，如有元素将重新开始判断
  109.                 for (var i = 1; i < idxs.length; i++) {
  110.                     var idxi = idxs[i];
  111.                     var npsi = vps[idxi];
  112.                     if (xy2(nps0[0], npsi[0]) > areaRange * areaRange) {
  113.                         new_idxs.push(idxi);
  114.                     } else {
  115.                         g.push(npsi);//一个区域
  116.                     }
  117.                 }
  118.                 g.sort(function (g0, g1) {//找出附近点集数量最大的点
  119.                     return g1[1].length - g0[1].length;
  120.                 });
  121.                 areas.push(g);
  122.                 idxs = new_idxs;//不符合条件点集，如存在将重新开始判断
  123.             }
  124.             return areas;
  125.         }
  126.         function xy2(p0, p1) {//算距离
  127.             return (p0[0] - p1[0]) * (p0[0] - p1[0]) + (p0[1] - p1[1]) * (p0[1] - p1[1]);
  128.         }
  129.     </script>
  130. </body>
  131. </html>

找出点的密集区域，javascript实现，html5 canvas效果图的更多相关文章

  1. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  2. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  3. JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

    基于HTML5 canvas 获取文本占用的像素宽度   by:授客 QQ:1033553122 直接上代码   // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...

  4. JavaScript和html5 canvas生成圆形印章

    代码: function createSeal(id,company,name){ var canvas = document.getElementById(id); var context = ca ...

  5. [转]JavaScript和html5 canvas生成圆形印章

    本文转自:http://www.cnblogs.com/dragondean/p/6013529.html 代码: function createSeal(id,company,name){ var ...

  6. html5 canvas 画板

    <!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...

  7. javascript开发HTML5游戏--斗地主(单机模式part3)

    最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...

  8. javascript开发HTML5游戏--斗地主(单机模式part2)

    最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...

  9. 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）

    继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...

随机推荐

  1. 用一句sql语句更新两个表并可更新对应的字段的值

    ACCESS 例子: insert into products (ProNumber,CASNumber,Cnname,Price,Enname,Baozhuang,Pinpai) select Pr ...

  2. hi-nginx-1.4.9正式发布,支持javascript后端开发

    hi-nginx-1.4.9已经发布. 更新: 支持javascript后端开发 修复脚本搜索的一个bug 从这一版开始,hi-nginx开始支持javascript,这意味着把javascript应 ...

  3. 寻找U2OS中表达的基因及其promoter并用于后续annotation

    方法1.RNA-seq得到不同表达程度基因 方法2. 直接download U2OS_gene.csv https://cancer.sanger.ac.uk/cell_lines/download ...

  4. linux单项目发布流程

    1.安装python #1.安装python3.7所需要的依赖包yum -y groupinstall "Development tools"yum -y install zlib ...

  5. POI兴趣点搜索 - 地理信息系统（6）

    (2017-08-13 银河统计) POI(Point of Interest),中文可以翻译为"兴趣点",兴趣点(POI)是地理信息系统中的一个术语,泛指一切可以抽象为点的地理对 ...

  6. XPosed 示例

    https://blog.csdn.net/fmc088/article/details/80535894

  7. js filter 数组去重

    let arr = [1, 2, 3, 10, 4, 5, 1, 3, 5]; let stateNumArr = arr.filter((item, index, array) => { re ...

  8. self sqflite sample =======================

    import 'package:path_provider/path_provider.dart'; import 'dart:async'; import 'package:flutter/mate ...

  9. 原创《weex面向未来的架构》

    最近一直在做weex的调研工作,整理之后给公司做了一次技术分享. 分享内容如下: 1:Weex是什么? 2:  Weex目前能做什么? 3:  Weex 如何调试 4:  剖析一下Weex原理 5: ...

  10. mysql批量更新数据

    CREATE PROCEDURE `sp_update_temp_data`( out po_returnvalue ) ) leave_top:BEGIN #Routine body goes he ...