-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcanvas-radar-scan.html
144 lines (136 loc) · 4.58 KB
/
canvas-radar-scan.html
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>canvas 雷达扫描数据</title>
</head>
<body>
<canvas id="canvas" width='500' height='500'></canvas>
<script>
/**
* @author guopan
* @email: [email protected]
*/
const canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
const centerPoint = canvas.width / 2
ctx.translate(centerPoint, centerPoint)
var startArc = 0 // 扫描经过的弧度
var step = 1 / 720 // 重新渲染 雷达扫描过的弧度
const arcColor = 'gray' // 圆弧颜色 支持支持css能识别的各种形式
const arcLineWidth = centerPoint / 150 // 圆弧描边线宽度
// 圆弧数据 起始弧度和结束弧度
var arcData = [
{start: 1/2, end: 1},
{start: 0, end: 3/2},
{start: -1/4, end: 3/4},
{start: 1/2, end: 2},
{start: -1, end: 1/4}
]
run()
function run () {
draw()
startArc += step
if (startArc >= 2) startArc = 0
requestAnimationFrame(run)
}
function draw () {
// 清除画布
ctx.clearRect(-centerPoint, -centerPoint, canvas.width, canvas.height)
// 画一个半径为200的圆
drawArc({ r: centerPoint * 2 / 3, lineWidth: 0.8 })
// 5个小圆弧
for (var i = 0, len = arcData.length; i < len; i++) {
const {r = centerPoint / 2 - (centerPoint / 10) * i, start, end, color = arcColor, lineWidth = arcLineWidth} = arcData[i]
drawArc({r, start, end, color, lineWidth})
}
// 画出中心圆圈与中心圆点
drawArc({ r: centerPoint / 30, showline: false, color: 'green' })
drawArc({ r: centerPoint / 100, showline: false, color: 'blue' })
for (let i = 0, len = 360; i < len; i ++) {
drawRect({
angle: 360 / len * i,
height: Math.random() * centerPoint * 4 / 15
})
}
// 扫描雷达
drawArc({ r: centerPoint, color: 'transparent', start: startArc, end: startArc + 5 / 4, dir: true})
ctx.lineTo(0, 0)
// 填充雷达颜色
var fillColor = ctx.createLinearGradient(0, 0, 0, canvas.height)
fillColor.addColorStop(0, 'rgba(255, 0, 0, 0.4)')
fillColor.addColorStop(0.5, 'rgba(0, 0, 255, 0.4)')
fillColor.addColorStop(1, 'rgba(0, 255, 0, 1)')
ctx.fillStyle = fillColor
ctx.moveTo(centerPoint * 11 / 15 * Math.cos(-Math.PI * (3 / 4 + startArc)), centerPoint * 11 / 15 * Math.cos(-Math.PI * (3 / 4 + startArc)))
ctx.lineTo(0, 0)
ctx.fill()
}
// 画矩形
/**
* 画柱子
* @param {number} start 起始x坐标
* @param {number} end 起始y坐标
* @param {number} width 矩形宽度
* @param {number} height 矩形高度
* @param {number} rad 旋转角度
*/
function drawRect ({
start = 10,
end = 0,
width = centerPoint / 100,
height = 50,
angle = 0
}) {
ctx.beginPath()
// 外层柱状颜色 使用径向渐变
var rectFillColor = ctx.createRadialGradient(0, 0, 0, 20, 20, 60)
rectFillColor.addColorStop(0, '#1279e4')
rectFillColor.addColorStop(0.5, '#08de71')
rectFillColor.addColorStop(1, '#d6b514')
ctx.fillStyle = rectFillColor
ctx.save()
const tempArc = angle * Math.PI / 180 // 角度转化为弧度
const ratio = centerPoint * 7 / 10 // 系数
// 设置柱子的方向
ctx.setTransform(1, 0, 0, 1, centerPoint + Math.cos(tempArc) * ratio, centerPoint + Math.sin(tempArc) * ratio)
ctx.rotate(tempArc - Math.PI / 2)
ctx.fillRect(-width / 2, 0, width, height)
ctx.restore()
}
// 画弧度
/**
* 画圆弧方法
* @param {number} lineWidth 线条宽度
* @param {string} color 填充颜色
* @param {number} r 圆弧半径
* @param {number} start 起始弧度
* @param {number} end 结束弧度
* @param {boolean} dir 画线的方向 false: 顺时针 true: 逆时针
* @param {boolean} showline 是否显示描边线
*/
function drawArc ({
lineWidth = centerPoint / 300,
color = arcColor,
r = 200,
start = 0,
end = 2,
dir = false,
showline = true
}) {
ctx.beginPath()
if (showline) {
ctx.lineWidth = lineWidth
ctx.strokeStyle = color
}
ctx.arc(0, 0, r, Math.PI * start, Math.PI * end, dir)
ctx.stroke()
if (!showline) {
ctx.fillStyle = color
ctx.fill()
}
}
</script>
</body>
</html>