<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        html, body {

            margin: 0;

            padding: 0;

            border: none;

            width: 100%;

            height: 100%;

        }

    </style>

    <script type="text/javascript">

        onload = function () {

            demoCanvas.height = document.body.clientHeight - paramsPanel.clientHeight;

            demoCanvas.width = document.body.clientWidth;

        }

    </script>

</head>

<body>

    <div id="paramsPanel">

        <label for="radius">radius</label><input id="radius" type="range" value="5" max="111" min="1" />

        <label for="density">density</label><input id="density" type="range" value="5" max="111" min="1" />

        <label for="areaRange">areaRange</label><input id="areaRange" type="range" value="32" max="111" min="1" />

    </div>

    <canvas id="demoCanvas"></canvas>

    <script type="text/javascript">

        onkeydown = function (e) {

            switch (e.keyCode) {

                case 49:

                    radius.focus();

                    break;

                case 50:

                    density.focus();

                    break;

                case 51:

                    areaRange.focus();

                    break;

            }

        };

        function dropDots() {

            var ctx = demoCanvas.getContext("2d");

            var ps = [];

            function drop(e) {

                ctx.beginPath();

                ctx.arc(e.x, e.y, .5, 0, Math.PI * 2);

                ps.push([e.x, e.y]);

                ctx.fillStyle = "#000";

                ctx.fill();

            }

            demoCanvas.onmousedown = function (e) {

                demoCanvas.getContext("2d").clearRect(0, 0, 12344, 12344);

                ps = [];

                drop(e);

                addEventListener("mousemove", drop);

            };

            onmouseup = onblur = function () {

                if (!ps.length) {

                    return;

                }

                removeEventListener("mousemove", drop);

                var radius = parseFloat(document.getElementById("radius").value);

                var density = parseInt(document.getElementById("density").value);

                var areaRange = parseInt(document.getElementById("areaRange").value);

                var areas = getAreas(ps, radius, density, areaRange);

                for (var i = 0; i < areas.length; i++) {

                    var e = areas[i][0][0];

                    ctx.beginPath();

                    ctx.arc(e[0], e[1], areaRange / 2, 0, Math.PI * 2);

                    ctx.strokeStyle = "#00a";

                    ctx.stroke();

                    ctx.closePath();

                }

            }

        }

        dropDots();

        function getAreas(ps, radius, density, areaRange) {

            var vps = [];//所有符合条件的点与附近点集，格式为[point,[points]]

            for (var i = 0; i < ps.length; i++) {

                var nps = [];//遍历附近的点，找出附近点的点集

                for (var j = 0; j < ps.length; j++) {//

                    if (i === j) {

                        continue;

                    }

                    if (xy2(ps[i], ps[j]) > radius) {

                        continue;

                    }

                    nps.push(ps[j]);

                }

                if (nps.length > density) {//检查附近的点的密度

                    vps.push([ps[i], nps]);

                }

            }

            var idxs = [];

            for (var i = 0; i < vps.length; i++) {//生成所有符合条件的点集的坐标集

                idxs.push(i);

            }

            vps.sort(function (np0, np1) {//附近点集

                return np1[1].length - np0[1].length;

            });

            var areas = [];//返回值

            while (idxs.length) {

                var nps0 = vps[idxs[0]];

                var g = [nps0];

                var new_idxs = [];//不符合条件点集，如有元素将重新开始判断

                for (var i = 1; i < idxs.length; i++) {

                    var idxi = idxs[i];

                    var npsi = vps[idxi];

                    if (xy2(nps0[0], npsi[0]) > areaRange * areaRange) {

                        new_idxs.push(idxi);

                    } else {

                        g.push(npsi);//一个区域

                    }

                }

                g.sort(function (g0, g1) {//找出附近点集数量最大的点

                    return g1[1].length - g0[1].length;

                });

                areas.push(g);

                idxs = new_idxs;//不符合条件点集，如存在将重新开始判断

            }

            return areas;

        }

        function xy2(p0, p1) {//算距离

            return (p0[0] - p1[0]) * (p0[0] - p1[0]) + (p0[1] - p1[1]) * (p0[1] - p1[1]);

        }

    </script>

</body>

</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. Halcon一维运算相关算子整理

    Halcon一维离散函数算子 1.      abs_funct_1d  计算一维数组的绝对值 2.      compose_funct_1将两个离散的一维函数合并为一个函数 3.      cre ...

  2. LR12脚本录制流程

    准备工作: 工具:win7系统.loadrunner 12.Firefox浏览器.飞机订票系统. 打开飞机订票系统 开始录制脚本 步骤一:打开loadrunner(Virtual User Gener ...

  3. MVC 纯Table实现树节点效果+授权

    这几夜心里颇不平静, 奈何 JS水平有限,前台效果耗时四天,后台传值一天,直至昨夜丑时测试初步完成,其实就是一个给tree来授权,网上开源的插件很多,如treeview.treejs.easyui 等 ...

  4. ubuntu上传到百度网盘

    1 2 亲测可以上传

  5. better-scroll 中的img标签无法触发长按保存菜单

    better-scroll 默认禁用的多数标签的默认行为,启用默认行为需加如下属性 preventDefaultException: { tagName: /^(IMG|INPUT|TEXTAREA| ...

  6. MyRedis

    目录 其他 其他 Redis面试题集

  7. C# 开发AliYun(阿里云） 小蜜调用接口代码

    using System; using System.Collections.Generic; using Aliyun.Acs.Core; using Aliyun.Acs.Core.Excepti ...

  8. java如何编写多线程

    1.如何实现多线程 1.1实现Runnable接口,实现run()方法. public class Main4 implements Runnable { public static void mai ...

  9. Python day 03

    dya 03 今日内容 整形 布尔类型 字符串 补充 运算符补充 in value = '我是中国人' # 判断'中国'是否是value所代指的字符串的子序列. v1 = '中国' in value ...

  10. （转）Illustrated: Efficient Neural Architecture Search ---Guide on macro and micro search strategies in ENAS

    Illustrated: Efficient Neural Architecture Search --- Guide on macro and micro search strategies in  ...