只需改變參數就能畫出你想要的多邊形，代碼簡單！不得不驚嘆canvas的強大！
代碼奉上
<!doctype html> <html> <head> <meta charset="gb2312"> <title>畫圖</title> </head> <body> <canvas id = "myCanvas" width = '500' height = '500'>Canvas畫線技巧</canvas> <script> var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); function drawPath(x, y, n, r) { var i,ang; ang = Math.PI*2/n //旋轉的角度 context.save();//保存狀態 context.fillStyle ='rgba(255,0,0,.3)';//填充紅色，半透明 context.strokeStyle ='hsl(120,50%,50%)';//填充綠色 context.lineWidth = 1;//設置線寬 context.translate(x, y);//原點移到x,y處，即要畫的多邊形中心 context.moveTo(0, -r);//據中心r距離處畫點 context.beginPath(); for(i = 0;i < n; i ++) { context.rotate(ang)//旋轉 context.lineTo(0, -r);//據中心r距離處連線 } context.closePath(); context.stroke(); context.fill(); context.restore();//返回原始狀態 } drawPath(100, 100, 3, 40)//在100,100處畫一個半徑為40的三邊形 drawPath(200, 100, 4, 40)//在200,100處畫一個半徑為40的四角形 drawPath(300, 100, 5, 40)//在300,100處畫一個半徑為40的五邊形 drawPath(100, 200, 6, 40)//在100,200處畫一個半徑為40的六邊形 drawPath(200, 200, 7, 40)//在100,200處畫一個半徑為40的七邊形 drawPath(300, 200, 7, 40)//在300,200處畫一個半徑為40的八邊形 </script> </body> </html>