找出点的密集区域，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（排行榜界面&界面管理）
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
随机推荐
- 关于表格table嵌套,边框合并问题的解决方法，table嵌套（转）
原文地址:http://www.cnblogs.com/zhangym118/archive/2016/05/16/5496931.html [问题] 外层table与内层table嵌套,内外表格都需 ...
- Mysql 导入CSV文件，中文内容乱码问题
项目中用到含有中文字段的数据CSV文件,导入Mysql数据中发现中文内容乱码. 分析原因:因为数据库字符编码问题引起. [1]创建utf-8字符集数据库 CREATE DATABASE db_name ...
- 实际用到的linux小方法
2019.4.261.解决ssh端中文乱码 (1).查看系统(window)的字符集,在命令行界面顶端空白处,右键->属性->选项 底端查看即可. (2).ssh上查看系统支持的字符集 ...
- Gitlab定义安全变量遇到无法转义的字符——感叹号
我在安全变量(Secret variables)中定义了一个变量,变量值中含有特殊字符感叹号 ! . 然后我在批处理中,引用了该变量,惊奇地发现,变量值中的 ! 丢失了. 我以为是Windows CM ...
- linux磁盘命令-lsblk显现磁盘阵列分组
linux磁盘命令-lsblk显现磁盘阵列分组 lsblk(list block devices)能列出系统上所有的磁盘. lsblk [-dfimpt] [device] 选项与参数: -d :仅列 ...
- element-ui表单form和rules踩坑
问题: 代码: <el-form ref="form" :rules="rules" :model="form" label-widt ...
- mask rcnn input数据理解
Array.min() #无参,所有中的最小值 Array.min(0) # axis=0; 每列的最小值 Array.min(1) # axis=1:每行的最小值 字符串在输出时的对齐: S.lju ...
- IDEA启动项目内存溢出
一.java.lang.OutOfMemoryError: Java heap space 1.在tomcat设置界面 VM options添加参数 -server -XX:PermSize=512 ...
- mysql批量更新数据
CREATE PROCEDURE `sp_update_temp_data`( out po_returnvalue ) ) leave_top:BEGIN #Routine body goes he ...
- Q语言-[帝王三国送将辅助]
纯属自己写的, 玩同一个游戏的朋友,需要送将的, 把需要送的将改名为送, 然后启动辅助即可 本辅助只支持1024x576 191dpi 附上源码 //本源码初始化分辨率1024x576[夏天] Dim ...