淺談使用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);

這張圖片是代碼執行後的結果