找出点的密集区域，javascript实现，html5 canvas效果图
<!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效果图的更多相关文章
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
基于HTML5 canvas 获取文本占用的像素宽度 by:授客 QQ:1033553122 直接上代码 // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...
- JavaScript和html5 canvas生成圆形印章
代码: function createSeal(id,company,name){ var canvas = document.getElementById(id); var context = ca ...
- [转]JavaScript和html5 canvas生成圆形印章
本文转自:http://www.cnblogs.com/dragondean/p/6013529.html 代码: function createSeal(id,company,name){ var ...
- html5 canvas 画板
<!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...
- javascript开发HTML5游戏--斗地主(单机模式part3)
最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...
- javascript开发HTML5游戏--斗地主(单机模式part2)
最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
随机推荐
- TypeError: '_io.TextIOWrapper' object does not support item assignment
纯小白 遇到的细节问题: 报错 一开始看到这个傻逼了 TypeError: '_io.TextIOWrapper' object does not support item assignment 其实 ...
- 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165316
2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165316 下载 我分别下载了kali-linux-2019.1-i386的镜像文件和kali-linux ...
- php 防跨站表单提交
一种最优方式防跨站表单提交,用户限时token 就是生成一个随机且变换频繁加密字符串(可逆和不可逆).放在表单中,等到表单提交后检查. 这个随机字符串如果和当前用户身份相关联的话,那么攻击者伪造请求会 ...
- 记使用expo与expoKit分离工程遇到的坑
expoKit是支持expo平台的Objective-C和Java库,比纯RN一个个引入包开发效率会高一些,比如react-native-vector-icons包已经集成在expoKit中了. 假定 ...
- MB SD Connect 5 vs 2017 FVDI2 Commander
Both MB SD C5 and FVDI II are diagnostic and Programmer tools for Mercedes Benz Cars & Trucks.Th ...
- 服务器硬件与linux系统
服务器的特性: 高速度的CPU运算能力 长时间的可靠运行 强大的I/O外部数据吞吐能力 服务器通常具有更高的性能,效率,高可靠,高可用性,以及更好的扩展性. 服务器的分类 (1)服务器按外形分类 塔式 ...
- zabbix3.4实现sendEmail邮件报警
一.安装软件 wget http://caspian.dotconf.net/menu/Software/SendEmail/sendEmail-v1.56.tar.gz 创建目录 mkdir /us ...
- 解决jmeter中文乱码的三种方法
1.在Jmeter中的Http请求中,在内容编码后填入“utf-8”. 2.在本地文件存储Jmeter的bin目录下,修改jmeter.properties文件. (1)用记事本打开jmeter.pr ...
- Android组件系列----Intent详解（转载笔记）
[正文] Intent组件虽然不是四大组件,但却是连接四大组件的桥梁,学习好这个知识,也非常的重要. 一.什么是Intent 1.Intent的概念: Android中提供了Intent机制来协助应用 ...
- 使用go-template自定义kubectl get输出
kubectl get相关资源,默认输出为kubectl内置,一般我们也可以使用-o json或者-o yaml查看其完整的资源信息.但是很多时候,我们需要关心的信息并不全面,因此我们需要自定义输出的 ...