绘制形状（N 边形）

Question

我正在为大学做一个小游戏，我需要在我的项目中添加不同的形状。我说的是三角形、矩形、五边形、六边形、七边形、八边形……n-gon。我需要所有形状都是凸正多边形并且能够为内部着色。我正在考虑绘制 SVG 形状，但我不确定应该只给出要生成的形状的 n 边的公式。如果有一个 JS 插件，我可以将它包含在 Bower 中并生成形状，那就太好了。还有给它们着色的问题，然后可以用动画改变颜色，但是要一步一步来。

Answer 1

下面是我用来构建多边形的方法。它提供随机填充颜色。看看这是否有帮助。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Create SVG Polygons</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Create SVG Polygons</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Create inline svg with random circles, ellipses, polygons, and rectangles used for test environment.
</div><br />
<div id="svgDiv" style='border:1px black outset'>
<svg id="mySVG" />
</div><br />
Number Of Elements:<input type=text id=elemsValue size=1 value=1200 />
&nbsp;&nbsp;SVG Width:<input type=text id=widthValue size=1 value=600 />
&nbsp;&nbsp;SVG Height:<input type=text id=heightValue size=1 value=400 />
&nbsp;&nbsp;Element Sze:<input type=text id=sizeValue size=1 value=20 />
&nbsp;&nbsp;<button onClick=go()>go</button><br />
<script>

//---button---
function go()
{
 var elems=parseInt(elemsValue.value)
 var svgWidth=parseFloat(widthValue.value)
 var svgHeight=parseFloat(heightValue.value)
 var elemSize=parseFloat(sizeValue.value)
 //---clear prevoius---
 mySVG.removeChild(document.getElementById("globG"))
 svgGLOB(elems,svgWidth,svgHeight,elemSize)

}

function svgGLOB(elems,svgWidth,svgHeight,elemSize)
{
 /*  ---fill empty inline SVG element---
  <div id="svgDiv"><svg id="mySVG" /></div>
 */
 var NS="http://www.w3.org/2000/svg"
 mySVG.setAttribute("width",svgWidth)
 mySVG.setAttribute("height",svgHeight)
 svgDiv.style.width=svgWidth+"px"
 svgDiv.style.height=svgHeight+"px"

 var globG=document.createElementNS(NS,"g")
 globG.id="globG"
 globG.setAttribute("stroke","black")
 globG.setAttribute("stroke-width",1)
 mySVG.appendChild(globG)

 var points=randomPoints(elems,svgWidth,svgHeight,elemSize)
 var n=points.length
 var circleCnt=0
 var ellipseCnt=0
 var rectCnt=0
 var polygonCnt=0

 var RandomElems=[]
 RandomElems[0]="circle"
 RandomElems[1]="rect"
 RandomElems[2]="ellipse"
 RandomElems[3]="polygon_3"
 RandomElems[4]="polygon_4"
 RandomElems[5]="polygon_5"
 RandomElems[6]="polygon_6"
 RandomElems[7]="polygon_7"
 RandomElems[8]="polygon_8"
 RandomElems[9]="polygon_9"
 RandomElems[10]="polygon_10"
 RandomElems[11]="polygon_11"
 RandomElems[12]="polygon_12"

 for(var k=0;k<n;k++)
 {
  var rand=rdm(0,12)
  var elemStr=RandomElems[rand]

  if(!elemStr.indexOf("_"))
   var elemSt=elemStr
  else
   var elemSt=elemStr.split("_")[0]

  var elem=document.createElementNS(NS,elemSt)

  if(elemSt=="circle")
  {
   elem.setAttribute("r",elemSize)
   elem.setAttribute("fill",rcolor())
   elem.setAttribute("cx",points[k][0])
   elem.setAttribute("cy",points[k][1])
   elem.id=elemSt+(circleCnt++)
  }
  else if(elemSt=="ellipse")
  {
   elem.setAttribute("rx",elemSize)
   elem.setAttribute("ry",elemSize/2)
   elem.setAttribute("fill",rcolor())
   elem.setAttribute("cx",points[k][0])
   elem.setAttribute("cy",points[k][1])
   elem.id=elemSt+(ellipseCnt++)
  }
  else if(elemSt=="rect")
  {
   elem.setAttribute("width",elemSize)
   elem.setAttribute("height",elemSize)
   elem.setAttribute("fill",rcolor())
   elem.setAttribute("x",points[k][0])
   elem.setAttribute("y",points[k][1])
   elem.id=elemSt+(rectCnt++)
  }
  else if(elemSt=="polygon")
  {
   var pgonSides=parseInt(elemStr.split("_")[1])
   var pgonPnts=polygon(pgonSides,elemSize,points[k][0],points[k][1])
   elem.setAttribute("fill",rcolor())
   elem.setAttribute("points",pgonPnts.join())
   elem.id=elemSt+(polygonCnt++)
  }
  globG.appendChild(elem)
 }

 //---obtain a random whole number from a thru b---
 function rdm(a,b)
 {
  return a + Math.floor(Math.random()*(b-a+1));
 }

 function randomPoints(elems,svgWidth,svgHeight,elemSize)
 {
  //--return format:[ [x,y],[x,y],,, ]
  //---Generate  random points---
  function times(n, fn)
  {
   var a = [], i;
   for (i = 0; i < n; i++) {
   a.push(fn(i));
   }
   return a;
  }
  var width=svgWidth-2*elemSize
  var height=svgHeight-2*elemSize

  return  RandomPnts = times(elems, function() { return [Math.floor(width * Math.random()) + elemSize, Math.floor(height * Math.random()) + elemSize] });
 }
    //---random color---
 function rcolor()
 {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++ )
  {
   color += letters[Math.round(Math.random() * 15)];
  }
  return color;
 }
 function polygon(vCnt,radius,centerX,centerY)
 {
  var myPoints=[]
  var polyXPts      = Array(vCnt);
  var polyYPts      = Array(vCnt);
  var vertexAngle   = 360/vCnt;
  //---init polygon points processor---
  for(var v=0; v<vCnt; v++)
  {
   theAngle = (v*vertexAngle)*Math.PI/180;
   polyXPts[v] = radius*Math.cos(theAngle);
   polyYPts[v] = -radius*Math.sin(theAngle);
  }
  //--note points are CCW---
  for(var v=0;v<vCnt; v++)
  {
   var point=[centerX+polyXPts[v],centerY+polyYPts[v]]
   myPoints.push(point)
  }
  return myPoints
 }
}

document.addEventListener("onload",init(),false)
function init()
{

 svgGLOB(1200,600,400,20)

}
</script>

</body>
</html>

绘制形状（N 边形）

Drawing Shapes (N-gons)

html

javascript

css

svg

shapes