Voronoi ：其實就是在一個平面上有若干個特殊點，每個點都和裏它最近的特殊點的顏色相同。
這裏寫出一個基本代碼，Voronoi圖可以用於生成隨機地圖之類的。網上有相關教程，這個是自己寫的第一步。
因爲生成地圖要自然邊界和平均分佈的地界，後期的開發都要圍繞這個基礎。因爲接下來要給Voronoi 單獨設個類了。所以先把第一步的代碼貼出了。以做筆記。
<!DOCTYPE HTML>
<html>
<body>
<main>
</main>
<script type="text/javascript">
var width = 500;
var height = 500;
var main = document.getElementsByTagName('main')[0];
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
main.appendChild(canvas);
// var p = new Point(100,200);
// alert(p.getX());
//draw
var cxt=canvas.getContext("2d");
//points
var point_number = 4;
var points = new Array();
//第一步隨機生成點
for(var i =0 ; i <point_number ; i++){
var tmpPoint = new Point(0,0);
tmpPoint.randomPoint();
points.push(tmpPoint);
}
//記錄不同點的顏色
var colorMap = new Map();
//繪製出每個點的顏色，它的顏色和它距離最近的點的顏色相同
for(var i = 0; i < width ; i++){
for(var j = 0; j <height ; j++){
var dis = -1;
var nearPointID = 0;
for(var m = 0 ; m < points.length ; m++){
var tmpDis = PointDis(new Point(i,j),points[m]);
if(dis < 0){
dis = tmpDis;
}
if(tmpDis<dis){
dis = tmpDis;
nearPointID = m;
}
}
if(!colorMap.get(nearPointID)){
var color = Math.floor(Math.random() * 16777216).toString(16);
colorMap.set(nearPointID,color);
}
cxt.fillStyle = "#" + colorMap.get(nearPointID);
cxt.fillRect(i,j,1,1);
}
}
//繪出隨機點
for(var i =0 ; i <point_number ; i++){
cxt.fillStyle = "#000000";
cxt.fillRect(points[i].getX(),points[i].getY(),2,2);
}
console.log("over");
//class point
function Point(ax,ay){
var x = 0;
var y = 0;
var init = function(){
x = ax;
y = ay;
}
this.getX = function(){
return x;
}
this.getY = function(){
return y
}
this.setPoint = function(p1){
x = p1.getX();
y = p1.getY();
}
this.randomPoint = function(){
x = Math.round(Math.random() * width);
y = Math.round(Math.random() * height);
}
this.isReal = function(){
return x!=-1&&y!=-1;
}
init();
}
//計算出點的距離函數
function PointDis(p1,p2){
return Math.sqrt((Math.pow((p1.getX() - p2.getX()),2) + Math.pow((p1.getY() - p2.getY()),2)));
}
</script>
</body>
</html>