我正在爲大學制作一個小型遊戲，我需要在我的項目中添加不同的形狀。我正在談論三角形，矩形，五角大樓，六角形，七邊形，八角形...... n-gon。我需要所有的形狀是凸的正多邊形，並能夠對內部進行着色。我正在考慮繪製SVG形狀，但我不確定應該只給出要生成的形狀的n邊的公式。如果有一個JS插件可以包含在Bower中並生成形狀，那將會很棒。還有着色它們的問題，之後能夠用動畫改變顏色，但是一步一步地進行。
繪圖形狀（N-gons）
下面是我用來構建多邊形的方法。它提供了一個隨機的填充顏色。看看這是否有幫助。
<!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 />
SVG Width:<input type=text id=widthValue size=1 value=600 />
SVG Height:<input type=text id=heightValue size=1 value=400 />
Element Sze:<input type=text id=sizeValue size=1 value=20 />
<button onClick=go()>go</button><br />
<script>
//---button---
function go()
{
\t var elems=parseInt(elemsValue.value)
\t var svgWidth=parseFloat(widthValue.value)
\t var svgHeight=parseFloat(heightValue.value)
\t var elemSize=parseFloat(sizeValue.value)
\t //---clear prevoius---
\t mySVG.removeChild(document.getElementById("globG"))
\t svgGLOB(elems,svgWidth,svgHeight,elemSize)
}
function svgGLOB(elems,svgWidth,svgHeight,elemSize)
{
\t /* ---fill empty inline SVG element---
\t \t <div id="svgDiv"><svg id="mySVG" /></div>
\t */
\t var NS="http://www.w3.org/2000/svg"
\t mySVG.setAttribute("width",svgWidth)
\t mySVG.setAttribute("height",svgHeight)
\t svgDiv.style.width=svgWidth+"px"
\t svgDiv.style.height=svgHeight+"px"
\t var globG=document.createElementNS(NS,"g")
\t globG.id="globG"
\t globG.setAttribute("stroke","black")
\t globG.setAttribute("stroke-width",1)
\t mySVG.appendChild(globG)
\t var points=randomPoints(elems,svgWidth,svgHeight,elemSize)
\t var n=points.length
\t var circleCnt=0
\t var ellipseCnt=0
\t var rectCnt=0
\t var polygonCnt=0
\t var RandomElems=[]
\t RandomElems[0]="circle"
\t RandomElems[1]="rect"
\t RandomElems[2]="ellipse"
\t RandomElems[3]="polygon_3"
\t RandomElems[4]="polygon_4"
\t RandomElems[5]="polygon_5"
\t RandomElems[6]="polygon_6"
\t RandomElems[7]="polygon_7"
\t RandomElems[8]="polygon_8"
\t RandomElems[9]="polygon_9"
\t RandomElems[10]="polygon_10"
\t RandomElems[11]="polygon_11"
\t RandomElems[12]="polygon_12"
\t for(var k=0;k<n;k++)
\t {
\t \t var rand=rdm(0,12)
\t \t var elemStr=RandomElems[rand]
\t \t if(!elemStr.indexOf("_"))
\t \t \t var elemSt=elemStr
\t \t else
\t \t \t var elemSt=elemStr.split("_")[0]
\t \t var elem=document.createElementNS(NS,elemSt)
\t \t if(elemSt=="circle")
\t \t {
\t \t \t elem.setAttribute("r",elemSize)
\t \t \t elem.setAttribute("fill",rcolor())
\t \t \t elem.setAttribute("cx",points[k][0])
\t \t \t elem.setAttribute("cy",points[k][1])
\t \t \t elem.id=elemSt+(circleCnt++)
\t \t }
\t \t else if(elemSt=="ellipse")
\t \t {
\t \t \t elem.setAttribute("rx",elemSize)
\t \t \t elem.setAttribute("ry",elemSize/2)
\t \t \t elem.setAttribute("fill",rcolor())
\t \t \t elem.setAttribute("cx",points[k][0])
\t \t \t elem.setAttribute("cy",points[k][1])
\t \t \t elem.id=elemSt+(ellipseCnt++)
\t \t }
\t \t else if(elemSt=="rect")
\t \t {
\t \t \t elem.setAttribute("width",elemSize)
\t \t \t elem.setAttribute("height",elemSize)
\t \t \t elem.setAttribute("fill",rcolor())
\t \t \t elem.setAttribute("x",points[k][0])
\t \t \t elem.setAttribute("y",points[k][1])
\t \t \t elem.id=elemSt+(rectCnt++)
\t \t }
\t \t else if(elemSt=="polygon")
\t \t {
\t \t \t var pgonSides=parseInt(elemStr.split("_")[1])
\t \t \t var pgonPnts=polygon(pgonSides,elemSize,points[k][0],points[k][1])
\t \t \t elem.setAttribute("fill",rcolor())
\t \t \t elem.setAttribute("points",pgonPnts.join())
\t \t \t elem.id=elemSt+(polygonCnt++)
\t \t }
\t \t globG.appendChild(elem)
\t }
\t //---obtain a random whole number from a thru b---
\t function rdm(a,b)
\t {
\t \t return a + Math.floor(Math.random()*(b-a+1));
\t }
\t function randomPoints(elems,svgWidth,svgHeight,elemSize)
\t {
\t \t //--return format:[ [x,y],[x,y],,, ]
\t \t //---Generate random points---
\t \t function times(n, fn)
\t \t {
\t \t \t var a = [], i;
\t \t \t for (i = 0; i < n; i++) {
\t \t \t a.push(fn(i));
\t \t \t }
\t \t \t return a;
\t \t }
\t \t var width=svgWidth-2*elemSize
\t \t var height=svgHeight-2*elemSize
\t \t return \t RandomPnts = times(elems, function() { return [Math.floor(width * Math.random()) + elemSize, Math.floor(height * Math.random()) + elemSize] });
\t }
//---random color---
\t function rcolor()
\t {
\t \t var letters = 'ABCDEF'.split('');
\t \t var color = '#';
\t \t for (var i = 0; i < 6; i++)
\t \t {
\t \t \t color += letters[Math.round(Math.random() * 15)];
\t \t }
\t \t return color;
\t }
\t function polygon(vCnt,radius,centerX,centerY)
\t {
\t \t var myPoints=[]
\t \t var polyXPts = Array(vCnt);
\t \t var polyYPts = Array(vCnt);
\t \t var vertexAngle = 360/vCnt;
\t \t //---init polygon points processor---
\t \t for(var v=0; v<vCnt; v++)
\t \t {
\t \t \t theAngle = (v*vertexAngle)*Math.PI/180;
\t \t \t polyXPts[v] = radius*Math.cos(theAngle);
\t \t \t polyYPts[v] = -radius*Math.sin(theAngle);
\t \t }
\t \t //--note points are CCW---
\t \t for(var v=0;v<vCnt; v++)
\t \t {
\t \t \t var point=[centerX+polyXPts[v],centerY+polyYPts[v]]
\t \t \t myPoints.push(point)
\t \t }
\t \t return myPoints
\t }
}
document.addEventListener("onload",init(),false)
function init()
{
\t svgGLOB(1200,600,400,20)
}
</script>
</body>
</html>
你知道如何旋轉的元素，使它們不會出現傾斜？ 我可以設置 'elem.style.transform ='rotate（'+ deg +'deg）'; elem.style.transformOrigin = '50％50％';' 但是如何計算每個n-gon的具體度數？ – Lexx