参考地址 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;
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<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>