canvas手绘正五边形

一、基本用法：

alertShow(param: any, $index: any) {
        let $log = this.$log;
        let $scope = this.$scope;
        if (param !== $scope.lastObj) {
            param.show = true;
            if ($scope.lastObj !== null) {
                $scope.lastObj.show = false;
            }
            $scope.lastObj = param;
            $scope.radarAlert = true;
            if ($index === 0) {
                $(".radarChart_alert").css({left: $scope.arr[$index].x + 100 + "px", top: $scope.arr[$index].y + "px"});
            } else {
                $(".radarChart_alert").css({left: $scope.arr[$index].x, top: $scope.arr[$index].y + 40 + "px"});
            }
        }
    }
drawRadarChart() {
    $scope.radarChartCategroy = [
            {name1: "词汇短语", name2: "排名前34%", show: false},
            {name1: "口语运用", name2: "排名前34%", show: false},
            {name1: "听力理解", name2: "排名前34%", show: false},
            {name1: "阅读理解", name2: "排名前34%", show: false},
            {name1: "语法句法", name2: "排名前34%", show: false}
        ];
        let $scope = this.$scope;
        let width: any, long: any, samll: any, big: any;
        getWidth();
        function getWidth() {
            width = $(".nav").width();
            $(".radarChart_div").height(width);
            $(".nav").height(width);
            $("#radarChart").attr({width: width, height: width});
            long = width / 2;
            samll = (width / 2) * Math.tan(36 * Math.PI / 180);
            big = (width / 2) / Math.cos(36 * Math.PI / 180);
            window.requestAnimationFrame(draw);
            let radarBtnWidth = $(".radarChart_select").width();
            let radarBtnHeight = $(".radarChart_select").height();
            $scope.arr = [
                {x: long - radarBtnWidth / 2, y: 5 - radarBtnHeight - 15},
                {x: -radarBtnWidth - 5, y: samll + 5 - radarBtnHeight / 2},
                {x: big * Math.sin(18 * Math.PI / 180) - radarBtnWidth * 2 / 3, y: big * Math.cos(18 * Math.PI / 180) + samll + radarBtnHeight / 2},
                {x: big * Math.sin(18 * Math.PI / 180) + big - radarBtnWidth / 3, y: big * Math.cos(18 * Math.PI / 180) + samll + radarBtnHeight / 2},
                {x: 2 * long + 5, y: samll + 5 - radarBtnHeight / 2}
            ]
            for (let i = 0; i < $scope.arr.length; i++) {
                $(".radarChart_select").eq(i).css({left: $scope.arr[i].x + "px", top: $scope.arr[i].y + "px"});
            }
        }
        function draw() {
            let canvas = document.getElementById("radarChart");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, width, width);
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.lineJoin = "miter";
                ctx.strokeStyle = "rgba(255,255,255,.5)";
                ctx.moveTo(long, 5);
                ctx.lineTo(0, samll + 5);
                ctx.lineTo(big * Math.sin(18 * Math.PI / 180), big * Math.cos(18 * Math.PI / 180) + samll + 5);
                ctx.lineTo(big * Math.sin(18 * Math.PI / 180) + big, big * Math.cos(18 * Math.PI / 180) + samll + 5);
                ctx.lineTo(2 * long, samll + 5);
                ctx.lineTo(long, 5);
                ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));
                ctx.lineTo(long, 5);
                ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));
                ctx.lineTo(0, samll + 5);
                ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));
                ctx.lineTo(big * Math.sin(18 * Math.PI / 180), big * Math.cos(18 * Math.PI / 180) + samll + 5);
                ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));
                ctx.lineTo(big * Math.sin(18 * Math.PI / 180) + big, big * Math.cos(18 * Math.PI / 180) + samll + 5);
                ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180));
                ctx.lineTo(2 * long, samll + 5);
                ctx.stroke();
                ctx.save();
                ctx.beginPath();
                ctx.fillStyle = "rgba(255,255,255,.5)";
                ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180) - $scope.num + 5);
                ctx.lineTo(long - $scope.num * Math.sin(72 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) - $scope.num * Math.cos(72 * Math.PI / 180) + 5);
                ctx.lineTo(long - $scope.num * Math.sin(36 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) + $scope.num * Math.cos(36 * Math.PI / 180) + 5);
                ctx.lineTo(long + $scope.num * Math.sin(36 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) + $scope.num * Math.cos(36 * Math.PI / 180) + 5);
                ctx.lineTo(long + $scope.num * Math.sin(72 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) - $scope.num * Math.cos(72 * Math.PI / 180) + 5);
//                ctx.lineTo(long, long / Math.sin(72 * Math.PI / 180) - $scope.num + 5);
                ctx.fill();
                ctx.save();
                ctx.restore();
                if ($scope.time2 < 60) {
                    window.requestAnimationFrame(draw);
                    $scope.num = $scope.num + long / 60;
                    $scope.time2 = $scope.time2 + 1;
                }
            }
        }
    }
}

            <div>
                <div class="radarChart_div"></div>
                <div class="nav">
                    <canvas id="radarChart"></canvas>
                    <div class="radarChart_select" ng-repeat="item in radarChartCategroy" ng-click="events.alertShow(item, $index)"
                         ng-class="{'radarChart_select_true':item.show,'radarChart_select_flase':!item.show}">
                        <div>{{item.name1}}</div>
                        <div>{{item.name2}}</div>
                    </div>
                    <div class="radarChart_alert" ng-style="radarAlert ? {'display': 'flex'} : {'display': 'none'}">
                        <div>213道</div>
                        <div>72%</div>
                        <div>正确答题</div>
                        <div>正确率</div>
                    </div>
                </div>
                <div class="radarChart_div"></div>              
            </div>