canvas绘制多边形

canvas绘制多边形

canvas封装绘制多边形方法，通过传参来实现绘制图形的定制需要。

1 2	// html部分 <canvas width = 400 height = 400 id = "canvas" > </canvas>

// js部分
function angleToRadian(angle) {
    // 角度转弧度
    return angle * Math.PI / 180;
};



/**
* 参数说明：
* side:边数
* r: 半径
* offsetX:圆心默认在画布左上角，需要将圆心移动到画布中间，这是水平方向上的移动距离
* offsetY:这是垂直方向移动距离
*/
function getAxisPoints(side, r, offsetX, offsetY) {
    /**
        {side} 几边形
        {r} 半径
        {offsetX} x轴偏移距离
        {offsetY} y轴偏移距离
    */
    var angle = 360 / side; // 每条边所占角度
    var axisArr = [];
    for (var i = 0; i < side; i++) {
        /*
         * 求出每个顶点坐标 angle为弧度值；
         * x = r * Math.cos(angle);  
         * y = r * Math.sin(angle); 
         */
        var x = offsetX + Math.cos(angleToRadian(angle * (i + 1))) * r;
        var y = offsetY + Math.sin(angleToRadian(angle * (i + 1))) * r;
        axisArr.push({
            x,
            y
        })
    };
    return axisArr;
};

var _axisArr = getAxisPoints(3, 150, 200, 200); // 取到多边形顶点坐标

var canvas = document.querySelector("#canvas");
var txt = canvas.getContext("2d");
txt.beginPath();
txt.moveTo(_axisArr[0].x, _axisArr[0].y);
_axisArr.map(function(item, index) {
    if (index > 0) {
        txt.lineTo(_axisArr[index].x, _axisArr[index].y)
    }
});
txt.lineTo(_axisArr[0].x, _axisArr[0].y);
txt.strokeStyle = "#000";
txt.stroke();