<!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. Ubuntu14.04 安装 Sublime Text 3

    Linux下安装,一种办法是从官网下载 tar.bz ,手动安装.另一种是使用apt-ge安装 这里介绍用 apt-get 自动安装方法: 1.添加sublime text 3的仓库: sudo ad ...

  2. centos7 安装php7,报错cannot get uid for user nginx

     

  3. 【SparkStreaming学习之三】 SparkStreaming和kafka整合

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  4. python的对象 变量

    对象 所有的数据类型都是对象 字符串 数字:整数.数字 列表.字典 函数.类.模块.方法 print(type(20)) # 查看对象的数据类型 python整型: int  浮点型 :float 精 ...

  5. Elastic-Job 配置介绍

    作业配置 与Spring容器配合使用作业,可以将作业Bean配置为Spring Bean,可在作业中通过依赖注入使用Spring容器管理的数据源等对象.可用placeholder占位符从属性文件中取值 ...

  6. volatile CAS

    减少上下文切换的方法有无锁并发编程.CAS算法.使用最少线程和使用协程. 无锁并发编程.多线程竞争锁时,会引起上下文切换,所以多线程处理数据时,可以用一 些办法来避免使用锁,如将数据的ID按照Hash ...

  7. oracle 事务 与 提交

    Oracle事务 一般事务(DML)即数据修改(增.删.改)的事务事务会将所有在事务中被修改的数据行加上锁(行级锁),来阻止其它人(会话)同时对这些数据的修改操作.当事务被提交或回滚后,这些数据才会被 ...

  8. jdbc之工具类DBUtil的使用

    首先回顾一下jdbc的使用方法: 1. 注册驱动 2. 建立连接 3. 建立statement 4. 定义sql语句 5. 执行sql语句,如果执行的是查询需遍历结果集 6. 关闭连接 其中建立连接和 ...

  9. 加域电脑登陆系统后桌面文件丢失，登录系统提示用户名为“Temp”。

    注册表中定位到“HKEY_LOCAL_MACHINE\\\\SOFTWARE\\\\Microsoft\\\\Windows NT\\\\CurrentVersion\\\\ProfileList”, ...

  10. 996.ICU与死亡因素

    昨天,我为996.ICU这场国际运动贡献了一颗星. 关于这件事,第一想到的就是我们工作的初心是为了更好的生活,工作扼杀生活的不良风气应该坚决抵制. 查了一下,近些年人类正常死亡原因中排名前三的原因为: ...