-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvas-demo.html
154 lines (143 loc) · 4.91 KB
/
canvas-demo.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
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>canvas-demo</title>
<style>
.bge1e9f7{background:#e1e9f7}.rowCont{display:-webkit-flex;display:-ms-flex;display:flex;background:#fff}.boxCont{-webkit-box-flex:1;-ms-flex:1;flex:1;border-right:#ddd solid 1px}.rowCont .boxCont:last-of-type{border-right:none}.rowCont:last-of-type .boxCont{border-bottom:none}.boxCont .tit{position:relative;padding:10px;height:20px;line-height:20px;font-size:14px;color:#b6b6b6}.canvasIcon{width:135px;height:135px;margin:15px auto;text-align:center}
</style>
</head>
<body class="bge1e9f7">
<main class="main">
<div class="rowCont">
<div class="boxCont">
<div class="canvasIcon" id="canvas"></div>
</div>
</div>
</main>
<script>
//圆环canvas代码
/*
* ==================================
* opts.parent 插入到哪里 一个JS元素对象
* opts.width 宽度 = 2* (半径+弧宽)
* opts.radius 半径
* opts.arc 弧宽
* opts.perent 百分比
* opts.color 弧渲染颜色 [底色,进度色]
* opts.textColor 文字渲染颜色
* opts.textSize 文字渲染大小
* opts.animated 是否以动画的方式绘制 默认false
* opts.after 绘制完成时执行函数
* ==================================
**/
function drawRing(opts) {
var _opts = {
parent: document.getElementById('canvas'),
width: 100,
radius: 45,
arc: 5,
perent: 100,
color: ['#e5f7ff', '#2b8fff'],
textColor: '#000',
textSize: '14px',
text:0,
title:'',
titleSize:'14px',
unit:'单位',
unitSize:'12px',
animated: false,
after: function() {}
}, k;
for (k in opts) _opts[k] = opts[k];
var parent = _opts.parent,
width = _opts.width,
radius = _opts.radius,
arc = _opts.arc,
perent = parseFloat(_opts.perent),
color = _opts.color,
title = _opts.title,
titleSize = _opts.titleSize,
textSize = _opts.textSize,
textColor = _opts.textColor,
text = _opts.text,
unit = _opts.unit,
textColor = _opts.textColor,
unitSize = _opts.unitSize,
c = document.createElement('canvas'),
ctx = null,
x = 0,
animated = _opts.animated,
after = _opts.after;
parent.appendChild(c);
ctx = c.getContext("2d");
ctx.canvas.width = width;
ctx.canvas.height = width;
function clearFill() {
ctx.clearRect(0, 0, width, width);
}
function fillBG() {
ctx.beginPath();
ctx.lineWidth = arc;
ctx.strokeStyle = color[0];
ctx.arc(width / 2, width / 2, radius, 0, 2 * Math.PI);
ctx.stroke();
}
function fillArc(x) {
ctx.beginPath();
ctx.lineWidth = arc;
ctx.strokeStyle = color[1];
ctx.arc(width / 2, width / 2, radius, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
ctx.stroke();
}
function fillText(x) {
ctx.font = textSize + ' Arial';
ctx.fillStyle = textColor;
ctx.textBaseline = "middle";
ctx.textAlign = 'center';
ctx.fillText(x.toFixed(2), width / 2, width / 2 + 10);
}
function fillTextString(x,y,z,size) {
ctx.font = size + ' Arial';
ctx.fillStyle = textColor;
ctx.textBaseline = "middle";
ctx.textAlign = 'center';
ctx.fillText(x,y || width / 2-5,z || width / 2 -20);
}
function fill(x) {
fillBG();
fillArc(x);
fillTextString(title, width / 2-10,width / 2 -20,titleSize);
fillText(text);
fillTextString('/'+unit,width / 2+30,width / 2 -18,unitSize);
}
if (!animated) return fill(perent);
fill(x);
!function animate() {
if (++x > perent) return after && after();
setTimeout(animate, 10);
clearFill();
fill(x);
}();
}
var opts = {
parent: document.getElementById('canvas'),
width: 130,
radius: 60,
arc: 5,
perent: 75,
color: ['#e5f7ff', '#2b8fff'],
textColor: '#000',
textSize: '27px',
text: 30.2345,
animated: false,
title:"一级标题",
titleSize:'14px',
unit:'单位',
unitSize:'12px',
}
drawRing(opts);
</script>
</body>
</html>