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>