今天小编跟大家讲解下有关浅谈使用canvas绘制多边形 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浅谈使用canvas绘制多边形 的相关资料，希望小伙伴们看了有所帮助。
本文主要使用坐标轴的使用来绘制多边形，点位则都是在y轴上寻找，这种方法能够更好的理解图形与修改。
代码：
//id为html里canvas标签的属性id；//x，y为坐标轴的起始位置，因为canvas默认坐标轴在左上角//color为填充图形颜色//...side为边，如果有5个参数则绘制出来的为五边形，6个就是六边形var draw = function(id, x, y, color, ...side){ var c = document.getElementById(id); var ctx = c.getContext("2d"); //移动起始坐标轴 ctx.translate(x,y); ctx.fillStyle = color; //坐标轴旋转的角度 var angle = 360/(side.length); ctx.beginPath(); //第一个点位 ctx.moveTo(0,-side[0]) for(let i=1; i<side.length; i++){ //旋转坐标轴 ctx.rotate(angle*Math.PI/180); ctx.lineTo(0,-side[i]); } //填充 ctx.fill(); ctx.closePath();}draw('mycanvas',50,50,'#F0F0F0',50,50,50,50,50,50);draw('mycanvas',0,0,'#E0E0E0',25,25,25,25,25,25);draw('mycanvas',0,0,'#FF9797',25,25,20,20,40,25);效果：
这张图片是代码执行后的结果
来源：爱蒂网
