一般常用的绘图技术有三种：Svg,Canvas和WebGL
在正式使用Canvas绘制多边形及五角星之前，请允许我向大家简单的介绍下Canvas绘图之路径的基本语法结构
ctx.beginPath() -------- 开始一条新路径
ctx.closePath() -------- 闭合当前路径
ctx.lineWidth = 1 ------ 描边宽度
ctx.fillStyle = "#000" 填充样式或颜色
ctx.strokeStyle = "red" 描边样式或颜色
ctx.moveTo(x,y) -------- 移动到指定点
ctx.lineTo(x,y) ------- 从当前点到指定点画直线
ctx.stroke() ------- 对当前路径描边
ctx.fill() ------ 对当前路径填充
在了解了上面的一些基本知识之后，现在我们就要开始使用Canvas绘制正多边形了
<!DOCTYPE HTML>
<html lange=en>
<head>
<meta charset="utf-8"/>
<title> canvas </title>
<style>
#canvas{
border: 1px #333 solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
如果页面中能够看到这些字，那么您的浏览器不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function create(ctx) {
var dx=100;
var dy=100;
ctx.beginPath();
ctx.strokeStyle = (function(){
var r = Math.floor(Math.random()*255);
var g = Math.floor(Math.random()*255);
var b = Math.floor(Math.random()*255);
console.log(r);
console.log(g);
console.log(b);
return `rgb(${r},${g},${b})`;
})();
//多边形内角和公式(n-2)*180
//则每个外角为(180-(n-2)*180/n)
var reg = Math.PI/180*(180-(n-2)*180/n);//(n>=3)
//var reg = Math.PI / 5*4; 五角星
for(var i=0;i<=n;i++){
var x = Math.sin(i*reg);
var y = Math.cos(i*reg);
ctx.lineTo(dx+x*100,dy+y*100);
}
ctx.closePath();
}
create(ctx);
ctx.stroke();
//ctx.fill();
</script>
</body>
</html>
五角星已经注释在代码中，需要使用什么图形，只需要修改n值就可以啦