当前位置: 萬仟网 > IT编程>开发语言>JavaScript > 浅谈使用canvas绘制多边形

浅谈使用canvas绘制多边形

2019年09月23日 16:48  | 萬仟网IT编程  | 我要评论

本文主要使用坐标轴的使用来绘制多边形,点位则都是在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);

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

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com