| 77 | } |
| 78 | |
| 79 | drawObject() { |
| 80 | this._ctx.textAlign = 'center'; |
| 81 | this._ctx.font = '12px Arial'; |
| 82 | |
| 83 | // Draw the horizontal line |
| 84 | this._shape.fillRect(0, 50, this._viewWidth, 2, this._fontColor); |
| 85 | |
| 86 | // Draw the pulse |
| 87 | for (let i = 0; i < this._queue.length; i++) { |
| 88 | let q = this._queue[i]; |
| 89 | |
| 90 | if (q.time != null) { |
| 91 | this._ctx.fillStyle = this._fontColor; |
| 92 | this._ctx.fillText(q.time, q.x, 90); |
| 93 | |
| 94 | this._shape.fillRect(q.x - 1, 45, 2, 12, this._fontColor); |
| 95 | } else { |
| 96 | this._ctx.fillStyle = q.color; |
| 97 | this._ctx.beginPath(); |
| 98 | this._ctx.moveTo(q.x - 10, 50); |
| 99 | this._ctx.quadraticCurveTo(q.x - 5, -20 + q.space * 2, q.x, 50); |
| 100 | this._ctx.quadraticCurveTo(q.x + 5, 100 - q.space * 1, q.x + 10, 50); |
| 101 | this._ctx.closePath(); |
| 102 | this._ctx.fill(); |
| 103 | } |
| 104 | q.x += this._speed; |
| 105 | } |
| 106 | } |
| 107 | } |
| 108 | |