javascript canvas中的多边形

Question

我在调整the polygon calculation here为javascript时遇到问题。

我使用的动能，并有三个基本问题：

1. 如何在一个多边形，其中我已经给点阵列，例如计算随机点[73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93]？

2. 我在随机计算多边形（因为它们应该反映对象的集群）。我怎么知道在我的画布上放置多边形的空间？

3. 我该如何为此添加一些扩散？意思是，轻微的重叠，每隔一段时间再重复一次，并且在1中计算的点可能会偶尔重叠在多边形之外。

Answer 1

要回答＃1，这里是找到一个路径的随机点一个不那么伟大的方式：http://jsfiddle.net/Aj7Rw/

var points = [[73, 192], 
       [73, 160], 
       [340, 23], 
       [500, 109], 
       [499, 139], 
       [342, 93]], 
    minX,maxX,minY,maxY; 

// find min and max values 
for (var i = 0; i < points.length; i++){ 
    var point = points[i]; 

    if (minX == undefined || point[0] < minX) 
     minX = point[0]; 

    if (maxX == undefined || point[0] > maxX) 
     maxX = point[0]; 

    if (minY == undefined || point[1] < minY) 
     minY = point[1]; 

    if (maxY == undefined || point[1] > maxY) 
     maxY = point[1];   
} 

// draw the path so we can use isPointInPath 
var can = document.getElementById("test"), 
    ctx = can.getContext('2d'); 

ctx.beginPath(); 
ctx.moveTo(points[0][0],points[0][1]); 

for (var i = 1; i < points.length; i++) 
    ctx.lineTo(points[i][0],points[i][1]); 

ctx.closePath(); 
ctx.stroke(); 

// generate some random points. 
for (var i = 0; i < 250; i++){ 
    var found = false, iterations = 0; 
    while(!found){ 
     iterations++; 

     var x = Math.floor(Math.random()*(maxX-minX)+minX); 
     var y = Math.floor(Math.random()*(maxY-minY)+minY); 

     if (ctx.isPointInPath(x,y)){ 
      found = true; 
      ctx.fillRect(x-3,y-3,6,6); 
      console.log(x,y, iterations); // I'm logging the number of iterations it took to generate a point within the poly so you can get an idea of the lack of efficiency. 
     } 
    } 
}