50 lines
1.1 KiB
JavaScript
50 lines
1.1 KiB
JavaScript
|
class Graph {
|
||
|
|
constructor(canvas, color) {
|
||
|
|
this.canvas = canvas;
|
||
|
|
|
||
|
|
this.ctx = this.canvas.getContext("2d");
|
||
|
|
this.ctx.save();
|
||
|
|
|
||
|
|
this.scale = {x: 1, y: 1};
|
||
|
|
|
||
|
|
this.canvas.onresize = this.onresize();
|
||
|
|
this.setColor(color);
|
||
|
|
|
||
|
|
this.values = [];
|
||
|
|
}
|
||
|
|
|
||
|
|
setColor(color) {
|
||
|
|
this.color = color;
|
||
|
|
this.ctx.fillStyle = this.color;
|
||
|
|
}
|
||
|
|
|
||
|
|
updateScale() {
|
||
|
|
this.onresize();
|
||
|
|
}
|
||
|
|
|
||
|
|
onresize() {
|
||
|
|
this.ctx.restore();
|
||
|
|
this.ctx.save();
|
||
|
|
this.ctx.fillStyle = this.color;
|
||
|
|
this.ctx.translate(0, this.canvas.height);
|
||
|
|
this.ctx.scale(this.scale.x, -this.scale.y);
|
||
|
|
}
|
||
|
|
|
||
|
|
draw() {
|
||
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||
|
|
|
||
|
|
this.ctx.beginPath();
|
||
|
|
this.ctx.moveTo(0, 0);
|
||
|
|
|
||
|
|
let step = this.canvas.width / this.values.length;
|
||
|
|
this.ctx.save();
|
||
|
|
for (let i = 0; i < this.values.length; i++) {
|
||
|
|
this.ctx.lineTo(0, this.values[i]);
|
||
|
|
this.ctx.translate(step, 0);
|
||
|
|
}
|
||
|
|
this.ctx.restore();
|
||
|
|
|
||
|
|
this.ctx.lineTo(this.canvas.width, 0);
|
||
|
|
this.ctx.fill();
|
||
|
|
}
|
||
|
|
}
|