找出点的密集区域，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（排行榜界面&界面管理）
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
随机推荐
- Vue系列之 => webpack-babel的配置
安装 cnpm i babel-core@6.26.3 babel-loader@7.0.0 babel-plugin-transform-runtime -D cnpm i babel-preset ...
- Linux 故障问题处理
一. Debian 网卡问题 原因: 网卡提示 Device Not Managed 处理方法: . 编辑/etc/NetworkManager/NetworkManager.conf: 将其 ...
- Log4j2 日志级别
Log4j2日志级别 级别 在log4j2中, 共有8个级别,按照从低到高为:ALL < TRACE < DEBUG < INFO < WARN < ERROR < ...
- OSM自建服务
1. 安装PostgreSQL. 2. 安装PostGis(安装目录为PostgreSQL目录). 3. 安装osm2pgsql. osm2pgsql下载地址:http://customdebu ...
- redis 在 php 中的应用（List篇）
本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) 目录: List(列表) LPUSH LPUSHX RPUSH R ...
- Spring的事务
事务:事务指的是逻辑上的一组操作,这组操作要么都成功,要么都失败. Transaction事务的四大特性ACID: 1.Atomicity原子性 事务的操作要么都成功,要么都不做,只要有一个失败,就会 ...
- 利用Python计算π的值，并显示进度条
利用Python计算π的值,并显示进度条 第一步:下载tqdm 第二步;编写代码 from math import * from tqdm import tqdm from time import ...
- gzip对字符串的压缩和解压
package org.jc.plugins.gzip; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStre ...
- ElasticSearch(十)Elasticsearch检索出的数据列表按字段匹配的优先顺序及搜索单词拼音一部分搜不到数据
检索出的数据列表按字段匹配的优先顺序 一.举例 比如,发布一篇文章,文章包括基本的字段包括标题.发布时间.点击率.关键字.内容.当在页面中输入“教育”搜索关键词,会检索出指定字段包括“教育”的所有数据 ...
- k8s基本对象及架构
一.基本对象 pod pod是最小的部署单元,一个pod由一个或多个容器组成,pod中的容器共享存储和网络,在同一台docker主机上运行. service service是一个应用服务的抽象,定义了 ...