浅谈使用canvas绘制多边形
程序员文章站
2022-07-09 20:30:14
本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改。 这张图片是代码执行后的结果 ......
本文主要使用坐标轴的使用来绘制多边形,点位则都是在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);
这张图片是代码执行后的结果
上一篇: 致Python初学者的六点建议