-
Notifications
You must be signed in to change notification settings - Fork 0
/
canvas.html
124 lines (110 loc) · 4.09 KB
/
canvas.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<canvas style="border:1px solid red" width="500" height="500"></canvas>
</body>
<script>
//获取canvas的dom元素
var cvs = document.querySelector("canvas");
//创建绘制环境
var cxt = cvs.getContext("2d");
/*
* constructor { LineChart } 折线图构造函数
* param { ctx: Context } 绘图上下文
* param { paddingArr: Array } 折线图到画布四边的距离，存储顺序为上右下左
* param { arrowArr: Array } 折线图中箭头的宽和高
* param { data: Array } 存储了折线图中所需的数据
* */
function LineChart(ctx, paddingArr, arrowArr, data) {
this.ctx = ctx;
this.paddingArr = paddingArr;
this.arrowArr = arrowArr;
this.data = data;
this.arrowHeight = arrowArr[0];
this.arrowWidth = arrowArr[1];
//计算上顶点的距离
this.vertexTop = {
x: this.paddingArr[3],
y: this.paddingArr[0]
};
//计算原点的距离
this.origin = {
x: this.paddingArr[3],
y: this.ctx.canvas.height - this.paddingArr[2]
};
//计算右边点的距离
this.vertexRight = {
x: this.ctx.canvas.width - this.paddingArr[1],
y: this.ctx.canvas.height - this.paddingArr[2]
};
this.process();
}
LineChart.prototype = {
//设置构造函数
constructor: LineChart,
//绘制坐标轴中的两条线
drawZuobiao: function() {
this.ctx.beginPath();
this.ctx.moveTo(this.vertexTop.x, this.vertexTop.y);
this.ctx.lineTo(this.origin.x, this.origin.y);
this.ctx.lineTo(this.vertexRight.x, this.vertexRight.y);
this.ctx.stroke();
},
drawArrow: function() {
this.ctx.beginPath();
this.ctx.moveTo(this.vertexTop.x, this.vertexTop.y);
this.ctx.lineTo(this.vertexTop.x - this.arrowWidth / 2, this.vertexTop.y + this.arrowHeight);
this.ctx.lineTo(this.vertexTop.x, this.vertexTop.y + this.arrowHeight / 2);
this.ctx.lineTo(this.vertexTop.x + this.arrowWidth / 2, this.vertexTop.y + this.arrowHeight);
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(this.vertexRight.x, this.vertexRight.y);
this.ctx.lineTo(this.vertexRight.x - this.arrowHeight, this.vertexRight.y - this.arrowWidth / 2);
this.ctx.lineTo(this.vertexRight.x - this.arrowHeight / 2, this.vertexRight.y);
this.ctx.lineTo(this.vertexRight.x - this.arrowHeight, this.vertexRight.y + this.arrowWidth / 2);
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
},
process: function() {
this.processData = [];
//在这一部分将画布认识的坐标转化为本坐标系的坐标
for (var i = 0; i < this.data.length; i += 2) {
this.processData.push(this.origin.x + this.data[i]);
this.processData.push(this.origin.y - this.data[i + 1]);
};
},
drawOrcle: function() {
this.ctx.beginPath();
for (var i = 0; i < this.processData.length; i += 2) {
this.ctx.arc(this.processData[i], this.processData[i + 1], 5, 0, Math.PI * 2);
this.ctx.fill();
};
},
drawLine: function() {
this.ctx.beginPath();
for (var i = 0; i < this.processData.length; i += 2) {
this.ctx.lineTo(this.processData[i], this.processData[i + 1]);
};
this.ctx.stroke();
},
draw: function() {
this.drawZuobiao();
this.drawArrow();
this.drawOrcle();
this.drawLine();
}
};
var linechat = new LineChart(cxt, [20, 20, 20, 20], [10, 10], [10, 10, 20, 20, 60, 60, 100, 100]);
linechat.draw();
</script>
</html>