浅谈使用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);

效果：

这张图片是代码执行后的结果

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_5489